使用html2canvas.js实现功能中遇到的一些问题

[1]我要实现的功能是用户填写完表单后,点击提交按钮,截图。截图放在一个弹层里面,给一句提示”长按图片保存至手机”。

《使用html2canvas.js实现功能中遇到的一些问题》

js引入的是bluebird.min.js和html2canvas.js

《使用html2canvas.js实现功能中遇到的一些问题》
辗转写了这些代码,逻辑是点击按钮,截图,然后间隔一秒钟显示弹层。到这一步貌似实现功能。下面用真机测试遇到了两个问题:

《使用html2canvas.js实现功能中遇到的一些问题》
有些手机已经出现了下载图片选项
但是点击下载图片图片下载不下来,没有一点动作。后来前辈给出指导说有些css属性是html2canvas.js这个插件不支持的,比如:before属性,我把页面上用到的before属性全部替换后也不行,后来在common.css一行一行删样式,找到一个属性 body {overflow-x: hidden},把overflow-x: hidden去掉后是可以下载的,除了这两个属性,可能还有其它一些css不支持。
第二个问题,我用的手机是华为,用谷歌浏览器长按图片发现没有下载图片选项

《使用html2canvas.js实现功能中遇到的一些问题》
这个问题也是问了前辈,说可能是截图的图片质量太大导致的,然后我尝试将截图范围缩小

《使用html2canvas.js实现功能中遇到的一些问题》
缩小范围后是可以有下载图片选项,并且可以下载。
这是我使用插件遇到的一些问题。这篇文章的第三张和第四张图片是我顺手截图展示效果的,第一张和最后一张才是我项目中操作的图片。
这个功能在我的QQ浏览器和谷歌浏览器时可以实现功能的。但是发现华为自带的浏览器不支持。最后因为前端兼容性太差用了另外一种写法:后台处理好,把图片路径返回给前台,我就把图片路径放到指定位置。虽然最终方案没有使用html2canvas.js,但我想把遇到的问题写出来,希望别人少走些弯路。

    原文作者:我的一个道姑朋友
    原文地址: https://segmentfault.com/a/1190000019425696
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞