思路：在微信中登入，後臺傳來的是一個連結、一個名字、一張圖片。把圖片當做背景，畫滿整個畫布。之後需要把連結轉為二維碼，使用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>

</div>

<div>

<canvas width="" height=""></canvas>

</div>

<img 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 codeimg = convertCanvasToImage(mycans)

var xw = width - 72 - 29

var xh = 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

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)

}