运用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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞