html 使用canvas拼接圖片
從今天開始記錄一下平時(shí)日常中踩過的坑和一些通用的方法，以便以后自我查補(bǔ)怪蔑，也給需要者提供一點(diǎn)幫助啊易。
項(xiàng)目需要將隨機(jī)生成的二維碼放入一張背景圖中并且將兩張圖拼成一張。我是通過canvas畫圖工具將兩張圖畫在一起饮睬，再保存為圖片，具體實(shí)現(xiàn)代碼如下：
-
頁面
<div id="canbox">
<canvas id="myCanvas" width="" height=""></canvas>
</div>
<div style="width: 100%; text-align: center; vertical-align: middle;">
<img class="pic" src="" />
</div>
myCanvas 為canvas畫板篮奄，用于繪制
pic 為保存后圖片捆愁，用于顯示
-
方法
var wait = 0;
var base64 = result.url_base64;//base64格式二維碼圖片
var nickname = result.nickname;//顯示在圖片上的文字
//畫海報(bào) 繪制一張空白的canvas畫板
var c = document.getElementById("myCanvas");
c.width = 320;
c.height = 568;
var ctx = c.getContext("2d");
//背景
var img = new Image();
img.src = "css/player_back.jpg";
//二維碼
var codeimg = new Image();
codeimg.src = "data:image/png;base64," + base64;
//文字
ctx.font = "13px Arial";
ctx.fillStyle = "white";
var nickname = "微信: " + nickname;
img.onload = function() { //必須等待圖片加載完成
wait += 1;
if(wait == 2){
//繪制圖像
ctx.drawImage(img, 0, 0, 320, 568);//背景
ctx.drawImage(codeimg, 25, 428, 120, 120);//二維碼
ctx.fillText(nickname, 160, 525);//文字
ctx.fillText("長按圖片識別二維碼", 160, 545);
//繪制完成,轉(zhuǎn)為圖片
var bigcan = $('canvas')[0];
images = new Image();
images.src = bigcan.toDataURL("image/png");
$('.pic').attr('src', bigcan.toDataURL("image/png"));
document.getElementById("canbox").style.display="none";//隱藏畫板
return;
}
}
codeimg .onload = function() { //必須等待圖片加載完成
wait += 1;
if(wait == 2){
//繪制圖像
ctx.drawImage(img, 0, 0, 320, 568);//背景
ctx.drawImage(codeimg, 25, 428, 120, 120);//二維碼
ctx.fillText(nickname, 160, 525);//文字
ctx.fillText("長按圖片識別二維碼", 160, 545);
//繪制完成,轉(zhuǎn)為圖片
var bigcan = $('canvas')[0];
images = new Image();
images.src = bigcan.toDataURL("image/png");
$('.pic').attr('src', bigcan.toDataURL("image/png"));
document.getElementById("canbox").style.display="none";//隱藏畫板
return;
}
}
寬高都為固定參數(shù)，具體可以調(diào)整窟却。
最后繪圖寫了兩次是由于圖片加載是多線程昼丑，無法確保繪圖時(shí)兩張圖片順序加載完成，所以需要在保證兩張圖片都加載完成了再繪圖（參數(shù)wait == 2）
