好资源导航 » 文章资讯 » js canvas实现二维码和图片合成的海报

js canvas实现二维码和图片合成的海报

2023-09-05 04:18:04 68

本文实例为大家分享了canvas二维码和图片合成海报的具体代码，供大家参考，具体内容如下

思路：在微信中登录，后台传来的是一个链接、一个名字、一张图片。把图片当做背景，画满整个画布。之后需要把链接转为二维码，使用jq.qrcode转化，转化完成后是一个canvas，把这个canvas再转成一张图片，画到大的画布上。把名字画到画布上。把整张画布转为图片。

一、定义画布和合成海报的img


#canbox{
width:100%;
height:100%;
position:fixed;
top:0;
bottom:0;
left:0;
}
.canimg{
width:100%;
height:100%;
position:fixed;
top:0;
bottom:0;
left:0;
}

二、用jquery.qrcode把网址变成二维码

后台传过来的是网址，需要转为二维码，二维码也是canvas，需要把二维码转为图片

$("#qrcode").qrcode({
width:72,//宽度
height:72,//高度
text:res.data.poster_qrcode,//任意内容
});

三、把图片画到画布上，需要占满全屏

//画海报
varwidth=document.getElementById("canbox").offsetWidth;//宽度
varheight=document.getElementById("canbox").offsetHeight;//高度
varc=document.getElementById("myCanvas");
c.width=width
c.height=height
varctx=c.getContext("2d");
//首先画上背景图
varimg=newImage();
img.src=this.list.poster;
img.setAttribute("crossOrigin",'Anonymous')
varx_bot=height-44//画上名字
ctx.font="19pxGeorgia";

//画上二维码
functionconvertCanvasToImage(canvas){
varimage=newImage();
image.src=canvas.toDataURL("image/png");
returnimage;
}
varmycans=$('canvas')[1];//二维码所在的canvas
varcodeimg=convertCanvasToImage(mycans)
varxw=width-72-29
varxh=height-6-72

img.onload=function(){//必须等待图片加载完成
ctx.drawImage(img,0,0,width,height);//绘制图像进行拉伸
ctx.fillText(that.name,28,x_bot);
ctx.drawImage(codeimg,xw,xh,72,72);
//绘制完成,转为图片
setTimeout(function(){//在ios上无法在画完之后取到整个画布内容，加了个settimeout
varbigcan=$('canvas')[0];
letimages=newImage();
images.src=bigcan.toDataURL("image/png");
alert(bigcan.toDataURL("image/png"))
images.setAttribute("crossOrigin",'Anonymous')
$('.canimg').attr('src',bigcan.toDataURL("image/png"))
},0)
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

js canvas实现二维码和图片合成的海报

热门推荐

随机推荐