js canvas实现二维码和图片合成的海报
本文实例为大家分享了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) }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。