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

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

一、定义画布和合成海报的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把网址变成二维码

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

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

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

//画海报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); //绘制完成,转为图片 setTimeout(function() { //在ios上无法在画完之后取到整个画布内容，加了个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)}

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