html2canvas滚动轴问题、dom-to-image移动端兼容性问题汇总

项目要求是：html生成图片（图片格式不限），长按图片能够保存到本地，主要在移动端

1、初试html2canvas

最初选择的是html2canvas插件，将html转为canvas

再通过Canvas2Image，将canvas转为想要的图片

问题：只能截取一屏的内容，当出现滚动条时，不在滚动视区的部分不会被生成

 

2、换用dom-to-image

听从广大网友的建议，换用dom-to-image插件

该插件常用的是 toPng、toJpeg、toSvg 这三种方法

本人实测之后：toPng和toJpeg方法只在部分ios端有效，在ios8以上和android上（微信内置）存在兼容性问题

toSvg 能够顺利在各种机型上生成图片，但是无法长按保存，想来是svg格式在移动端的支持性不好

尝试使用 canvas.todataurl 将svg转换为png格式，发现在android端依旧存在兼容性问题

 

3、继续用回html2canvas

想到的解决方案是：将需要生成图片的长图按一定比例缩小，在一屏中生成图片

代码大致如下：

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

 

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