需要將一個(gè)背景圖+動態(tài)獲取的文字+微信頭像拼接成一張圖片，用戶可長按保存最終圖片萎战，難免就是要將html轉(zhuǎn)換成圖片咐容。
最初想要自己用canvas畫，但是略麻煩蚂维，后來發(fā)現(xiàn)了html2canvas這個(gè)插件戳粒，先將html轉(zhuǎn)成canvas路狮，再生成圖片。
官網(wǎng)鏈接如下：
http://html2canvas.hertzen.com/
使用起來也很簡單：
setTimeout(function () {
html2canvas($('#img_html')[0]).then(function (canvas) {
var img = new Image()
img.src = canvas.toDataURL('image/jpeg')
img.style.cssText += 'position:absolute;width:100%;left:0;top:0;'
$('#result').append(img)
})
}, 1000)
但是踩坑不少蔚约，羅列如下：
- 因?yàn)閔tml是動態(tài)生成的奄妨，所以最好加上
setTimeout延時(shí)轉(zhuǎn)換成canvas，不然可能html的dom元素還沒加載完苹祟。 -
canvas.toDataURl()該方法是將canvas轉(zhuǎn)成圖片砸抛，如果html中有跨域請求的圖片資源，那么canvas就會報(bào)錯(cuò)不支持跨域树枫。所以只好將微信頭像先上傳到服務(wù)器的文件系統(tǒng)直焙，請求圖片時(shí)，帶上允許跨域的響應(yīng)頭：Access-Control-Allow-Origin: * - 要轉(zhuǎn)換成圖片的 html砂轻，其css樣式要有幾點(diǎn)注意：
- 親測不能使用rem為單位定義文字大小奔誓、元素寬高等，不然無法顯示該元素
-
不能添加background搔涝，假如設(shè)置背景顏色為紅色或者一張背景圖厨喂，莫名其妙會多出一個(gè)元素，如下所示：
原始html
生成的圖片
4.
canvas.toDataURl()生成的圖片是base64的格式data:image/jpeg;base64,/9j/4AAQ...庄呈，可以直接作為img標(biāo)簽的src蜕煌。但是由于是小程序內(nèi)嵌H5，且圖片資源過大诬留，在某些機(jī)型（常見Ios）的微信小程序里面會限流斜纪。當(dāng)生成圖片，準(zhǔn)備渲染的時(shí)候故响，微信要么會直接白屏傀广，要么就是會彈框提醒：該小程序繼續(xù)運(yùn)行會影響微信的使用，強(qiáng)制退出該小程序彩届。
- 解決方法
function dataURLtoBlob (data_url) {
let arr = data_url.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
let blob = false
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
try {
blob = new Blob([u8arr], { type: mime })
} catch (e) {}
return blob
}
如上所示伪冰，可將base64轉(zhuǎn)成二進(jìn)制流，資源會減小1到1.5倍樟蠕。
