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

<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=\"\"/>

$(\"#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 = width
c.height = height
var 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];//二维码所在的canvas
var codeimg = convertCanvasToImage(mycans)
var xw = width - 72 - 29
var xh = height - 6 - 72

img.  = 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)
}