|
本帖最后由 不知道起什么名字 于 2021-1-4 17:22 编辑
let canvas = document.querySelector("#canvas");
let qr = document.getElementById("qrCode_");
let ctx = canvas.getContext("2d");
let img = new Image();
img.src = "背景图地址";
img.onload = function() {
let w = img.width * 1;
let h = img.height * 1;
canvas.width = w;
canvas.height = h;
ctx.drawImage(img, 0, 0, w, h);
// 对二维码进行初始化
let qrcode = new QRCode(qr, {
width: 120,//根据实际调整二维码大小
height: 120,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.L
});
var url = "二维码内容"
qrcode.makeCode(url);
let base64 = qr.firstChild.toDataURL("image/png", 1);
let shareQr = new Image();
shareQr.src = base64;
shareQr.onload = function() {
ctx.drawImage(shareQr, w - 156, h - 156, 120, 120);
//生成图片base64地址;
let base64url=canvas.toDataURL("image/png", 1)
};
};
//图片下载与保存
//使用trans模块
var trans = api.require('trans');
var base64Str = base64url.replace(/^data:image\/\w+;base64,/, "");//使用trans将base64转图片地址需去除data:image前缀 //base64url为之前合成图片base64url
var imgPath = "fs://img/";//保存路径
var imgName = "test.png";//保存名称
trans.saveImage({
base64Str: base64Str,//处理后的base64字符串
imgPath: imgPath,
imgName: imgName,
album: true,
}, function(ret, err) {
if (ret.status) {
//保存成功
}
});
html 内容
<div id="qrCode_" style="display: none;"></div>
<canvas id="canvas" style="display: none;"></canvas>
备注:
需添加trans模块
引入qrcode.js
|
|