项目要求是：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)";
兼容性问题真是前端一大烦心事。
内容来源于网络如有侵权请私信删除
文章来源: 博客园
- 还没有人评论，欢迎说说您的想法！
客服
