效果:
<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>