需要將一個背景圖+動態(tài)獲取的文字+微信頭像拼接成一張圖片，用戶可長按保存最終圖片，難免就是要將html轉換成圖片。
最初想要自己用canvas畫，但是略麻煩，后來發(fā)現(xiàn)了html2canvas這個插件，先將html轉成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)
但是踩坑不少，羅列如下：
- 因為html是動態(tài)生成的，所以最好加上
setTimeout延時轉換成canvas，不然可能html的dom元素還沒加載完。 -
canvas.toDataURl()該方法是將canvas轉成圖片，如果html中有跨域請求的圖片資源，那么canvas就會報錯不支持跨域。所以只好將微信頭像先上傳到服務器的文件系統(tǒng)，請求圖片時，帶上允許跨域的響應頭：Access-Control-Allow-Origin: * - 要轉換成圖片的 html，其css樣式要有幾點注意：
- 親測不能使用rem為單位定義文字大小、元素寬高等，不然無法顯示該元素
-
不能添加background，假如設置背景顏色為紅色或者一張背景圖，莫名其妙會多出一個元素，如下所示：
原始html
生成的圖片
4.
canvas.toDataURl()生成的圖片是base64的格式data:image/jpeg;base64,/9j/4AAQ...，可以直接作為img標簽的src。但是由于是小程序內嵌H5，且圖片資源過大，在某些機型（常見Ios）的微信小程序里面會限流。當生成圖片，準備渲染的時候，微信要么會直接白屏，要么就是會彈框提醒：該小程序繼續(xù)運行會影響微信的使用，強制退出該小程序。
- 解決方法
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轉成二進制流，資源會減小1到1.5倍。
