最近H5項(xiàng)目有個(gè)功能需求：長按微信網(wǎng)頁保存為截圖。本人使用了html2canvas.js實(shí)現(xiàn)碗脊，感覺效果還不錯(cuò)肋层，有幾個(gè)注意點(diǎn)和大家分享一下。
html2canvas官網(wǎng)：https://html2canvas.hertzen.com/
使用的版本是最新版本：^1.0.0-alpha.12
let ctx = this;
html2canvas(document.getElementById("sign"),{
scale: 2 }).then(function(canvas) {
ctx.url = canvas.toDataURL("image/png");
});
html2canvas 可以將一個(gè)元素渲染為canvas净当。需要注意的是内斯，Vue使用v-if和v-show的時(shí)候html2canvas無法將元素渲染為canvas蕴潦。在我的項(xiàng)目之中存在一個(gè)骨架屏，這里我的解決方案是對(duì)要渲染的網(wǎng)頁采用position:absolute為其增加一個(gè)蒙層俘闯。
生成canvas之后可以采用canvas.toDataURL("image/png")將canvas轉(zhuǎn)化為base64潭苞。
關(guān)于清晰度問題：在Android手機(jī)上，生成的圖片會(huì)存在模糊真朗。圖片的清晰度取決于生成的canvas的清晰度此疹，在html2canvas之中存在一個(gè)參數(shù)scale，這里設(shè)置生成canvas的大小設(shè)置為圖片大小的兩倍保障清晰度遮婶。
最后蝗碎，如果網(wǎng)頁之中存在較大的圖片，可能導(dǎo)致html2canvas生成canvas的時(shí)候圖片還沒有加載完蹭睡，從而致使排版錯(cuò)亂衍菱。可以判斷一下圖片是否加載完肩豁。
$('img').on('load', function() {
//圖片加載完成
});
