效果:

<script>
//合並大圖片
var data_codeImg = '<{$qrcode}>',
data = [
'images/images_get/bg.jpg',
data_codeImg
], base64 = [];
function draw(fn) {
var c = document.createElement('canvas'), // 獲取canvas對象( 通過選擇器選擇canvas元素 )
ctx = c.getContext('2d'), // 通過canvas獲取他的上下文繪制環境( context )
len = data.length;
c.width = 750; // 畫布寬 canvas的默認寬度與高度:寬度:300,高度:150 注:canvas的寬度與高度,只能通過行間屬性或者js動態修改,不要通過樣式去修改,否則獲取到的寬度與高度不准
c.height = 1262; // 畫布高
ctx.rect(0, 0, c.width, c.height); // 創建矩形 參數:繪制起點x坐標,繪制起點y坐標,矩形寬(像素),矩形高(像素)
ctx.fillStyle = '#fff';
ctx.fill();
function drawing(n) {
if (n < len) {
var img = new Image;
img.src = data[n];
img.onload = function () {
if (n === 1) {
// 畫圖 參數:圖片對象,相對畫布的起點x坐標,
// 相對畫布的起點y坐標,繪制的圖片寬度(二維碼,px),繪制的圖片高度(二維碼,px)
ctx.drawImage(img, c.width/1.56, 920, 240, 240);
}
else if(n === 0){
ctx.drawImage(img, 0, 0, c.width, c.height);
}
drawing(n + 1);//遞歸
}
} else {
//保存生成作品圖片
base64.push(c.toDataURL("image/jpeg", 0.8));
fn();
}
}
drawing(0);
}
// 調用
function hecheng() {
draw(function () {
document.getElementById('finally').innerHTML = '<img src="'+base64[0]+'">';
});
}
hecheng()
</script>
