[1]我想实现的功能是用户填写完表单后,点击提交按钮,然后截图。将截图放在弹出层,并提示“长按图片保存到手机”。js依次引入了bluebird.min.js和html2canvas.js来写这些代码。逻辑是点击按钮,截图,然后每隔一秒显示弹层。在这一点上,它似乎可以正常工作。接下来我在真机测试中遇到了两个问题:有的手机已经有下载图片的选项,但是我点击下载图片的时候无法下载图片,没有任何动作。后来学长指导说html2canvas.js插件不支持一些css属性,比如:before属性。我替换了页面上使用的所有before属性,但它没有用。后来我把common.css中的样式一行一行删掉,发现去掉overflow-x:hidden后可以下载一个属性body{overflow-x:hidden}。除了这两个属性,可能还有其他的css不支持。第二个问题,我用的手机是华为的。我用谷歌浏览器长按图片,发现没有下载图片的选项。前辈也问过这个问题。他们说截图的质量可能太高了,然后我试着缩小截图的范围。缩小范围后,有个下载图片的选项,可以下载。这是我在使用插件时遇到的一些问题。本文第三张和第四张图是我为了展示效果截图的,第一张和最后一张图是我项目中操作的图片。这个功能在我的QQ浏览器和谷歌浏览器都可以实现。但是发现华为自家的浏览器不支持。最后因为前端兼容性太差,换一种写法:后台处理,把图片路径返回给前台,我把图片路径放在指定位置。虽然最终的方案没有使用html2canvas.js,但是还是想把自己遇到的问题写出来,希望大家少走弯路。
