html2canvas滾動軸問題、dom-to-image移動端兼容性問題彙總

項目要求是：html生成圖片（圖片格式不限），長按圖片可以保存到本地，主要在移動端

一、初試html2canvas

最初選擇的是html2canvas插件，將html轉爲canvas

再經過Canvas2Image，將canvas轉爲想要的圖片

問題：只能截取一屏的內容，當出現滾動條時，不在滾動視區的部分不會被生成

 

二、換用dom-to-image

遵從廣大網友的建議，換用dom-to-image插件

該插件經常使用的是 toPng、toJpeg、toSvg 這三種方法

本人實測以後：toPng和toJpeg方法只在部分ios端有效，在ios8以上和android上（微信內置）存在兼容性問題

toSvg 可以順利在各類機型上生成圖片，可是沒法長按保存，想來是svg格式在移動端的支持性很差

嘗試使用 canvas.todataurl 將svg轉換爲png格式，發如今android端依舊存在兼容性問題

 

三、繼續用回html2canvas

想到的解決方案是：將須要生成圖片的長圖按必定比例縮小，在一屏中生成圖片

代碼大體以下：

img.style.transform = "scale(0.4)";

 

兼容性問題真是前端一大煩心事。