本文實例為大家分享了canvas二維碼和圖片合成海報的具體代碼，供大家參考，具體內(nèi)容如下
思路：在微信中登錄，后臺傳來的是一個鏈接、一個名字、一張圖片。把圖片當(dāng)做背景，畫滿整個畫布。之后需要把鏈接轉(zhuǎn)為二維碼，使用jq.qrcode轉(zhuǎn)化，轉(zhuǎn)化完成后是一個canvas，把這個canvas再轉(zhuǎn)成一張圖片，畫到大的畫布上。把名字畫到畫布上。把整張畫布轉(zhuǎn)為圖片。
一、定義畫布和合成海報的img
<style type="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><div id="qrcode"> </div><div id="canbox"> <canvas id="myCanvas" width="" height=""></canvas></div><img class="canimg" src=""/>
二、用jquery.qrcode把網(wǎng)址變成二維碼
后臺傳過來的是網(wǎng)址，需要轉(zhuǎn)為二維碼，二維碼也是canvas，需要把二維碼轉(zhuǎn)為圖片
$("#qrcode").qrcode({ width: 72, //寬度 height: 72, //高度 text: res.data.poster_qrcode, //任意內(nèi)容 });三、把圖片畫到畫布上，需要占滿全屏
//畫海報var width = document.getElementById("canbox").offsetWidth; //寬度 var height = document.getElementById("canbox").offsetHeight; // 高度var c = document.getElementById("myCanvas");c.width = widthc.height = heightvar ctx = c.getContext("2d");//首先畫上背景圖var img = new Image();img.src = this.list.poster;img.setAttribute("crossOrigin", 'Anonymous')var x_bot = height - 44 //畫上名字ctx.font = "19px Georgia";//畫上二維碼function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); return image;}var mycans = $('canvas')[1];//二維碼所在的canvasvar codeimg = convertCanvasToImage(mycans)var xw = width - 72 - 29var xh = height - 6 - 72img.onload = function() { //必須等待圖片加載完成 ctx.drawImage(img, 0, 0, width, height); //繪制圖像進行拉伸 ctx.fillText(that.name, 28, x_bot); ctx.drawImage(codeimg, xw, xh, 72, 72); //繪制完成,轉(zhuǎn)為圖片 setTimeout(function() { //在ios上無法在畫完之后取到整個畫布內(nèi)容，加了個settimeout var bigcan = $('canvas')[0]; let images = new Image(); images.src = bigcan.toDataURL("image/png"); alert(bigcan.toDataURL("image/png")) images.setAttribute("crossOrigin", 'Anonymous') $('.canimg').attr('src', bigcan.toDataURL("image/png")) }, 0)}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點
疑難解答
