這篇文章主要為大家詳細介紹了jscanvas實現二維碼和圖片合成的海報，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了canvas二維碼和圖片合成海報的具體代碼，供大家參考，具體內容如下
思路：在微信中登錄，后臺傳來的是一個鏈接、一個名字、一張圖片。把圖片當做背景，畫滿整個畫布。之后需要把鏈接轉為二維碼，使用jq.qrcode轉化，轉化完成后是一個canvas，把這個canvas再轉成一張圖片，畫到大的畫布上。把名字畫到畫布上。把整張畫布轉為圖片。
一、定義畫布和合成海報的img
<styletype="text/css">
#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;
}
</style>
<divid="qrcode">
</div>
<divid="canbox">
<canvasid="myCanvas"width=""height=""></canvas>
</div>
<imgclass="canimg"src=""/>
二、用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)
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。