项目要求是: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)";
兼容性问题真是前端一大烦心事。 |
|