生成二维码,选择一张海报,然后生成二维码并下载,
主要代码
生成二维码代码
///生成二维码
var qrcode = new QRCode("qrcode");
// 生成二维码的方法
function makeCode () {
// 二维码地址
var ewmSrc='http://h5.afocus.net/2022/cs/3/v2.html'
qrcode.makeCode(ewmSrc);
setTimeout(function () {
var ewmSrc=$('#qrcode').find('img').attr('src')
// console.log(ewmSrc)
},100)
}
makeCode();
合成画布并自动下载
function hecheng() {
base64 = [];
draw(function() {
// document.getElementById('imgBox').innerHTML = '<img src="' + base64[0] + '">';
// document.getElementById('downloadPic').href = base64[0];
})
//自动下载
setTimeout(function () {
$("#downloadPic").click();
document.getElementById("downloadPic").click();
// $("#downloadPic")[0].click();
},500)
}
function draw(fn) {
var hbxzBj= $('#pxfmxz_tc .haib_ylt .yulan span').find('img').attr('src')
hbImgSrc.splice(0,1,hbxzBj)
// console.log(hbImgSrc)
// var c = document.createElement('canvas');
var c = document.getElementById('mycanvas')
ctx = c.getContext('2d');
len = hbImgSrc.length;
c.width = 750;
c.height = 1250;
ctx.rect(0, 0, c.width, c.height);
ctx.fillStyle = '#fff';
ctx.fill();
function drawing(n) {
if(n < len) {
var img = new Image;
//img.crossOrigin = 'Anonymous'; //解决跨域
img.src = hbImgSrc[n];
img.onload = function() {
if(n == 1) {
ctx.beginPath();
ctx.rect(240 , 840 , 280 , 280);
ctx.fillStyle = '#fff';
ctx.fill();
ctx.font="normal bold 24px Arial,sans-serif"
ctx.fillStyle = "#000";
ctx.fillText("长按识别二维码",294,1157);
ctx.fillStyle="#fff";
ctx.font="30px Arial"
ctx.textBaseline = 'middle'; //设置文本的垂直对齐方式
ctx.textAlign = 'center';//设置文本的水平对齐方式
// ctx.fillText(hbText,c.width/2,518);
ctx.lineWidth=10;
var lineWidth = 0;
var canvasWidth = c.width-80;//计算canvas的宽度
var initHeight=40;//绘制字体距离canvas顶部初始的高度
var lastSubStrIndex= 0; //每次开始截取的字符串的索引
for(let i=0;i<hbText.length;i++){
lineWidth+=ctx.measureText(hbText[i]).width;
if(lineWidth>canvasWidth){
ctx.fillText(hbText.substring(lastSubStrIndex,i),c.width/2,initHeight+400);//绘制截取部分
initHeight+=40;//20为字体的高度
lineWidth=0;
lastSubStrIndex=i;
}
if(i==hbText.length-1){//绘制剩余部分
ctx.fillText(hbText.substring(lastSubStrIndex,i+1),c.width/2,initHeight+400);
}
}
ctx.drawImage(img, 251 , 853 , 256 , 256); //121和129表示二维码距离背景图片左上角的X轴,Y轴,160表示生成的图片中二维码的大小
} else {
ctx.drawImage(img, 0, 0, c.width, c.height);
}
drawing(n + 1); //递归
}
} else {
//保存生成作品图片
base64.push(c.toDataURL()); //通过canvas.toDataURL转成base64.
// console.log(JSON.stringify(base64));
$('#imgBox').html('<img src="' + base64[0] + '">')
$('#downloadPic').attr('href', base64[0])
fn();
}
}
drawing(0);
}
本文介绍如何在小程序中结合JavaScript生成二维码,并将其合成到海报上,最后实现自动下载功能。主要涉及二维码生成和画布合成技术。


被折叠的 条评论
为什么被折叠?



