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)";

 

兼容性问题真是前端一大烦心事。