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

2019-06-10 admin

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

图片描述

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

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

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

clipboard.png 这个问题也是问了前辈,说可能是截图的图片质量太大导致的,然后我尝试将截图范围缩小

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

[转载]原文链接:https://segmentfault.com/a/1190000019425696

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-66900.html

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

相关文章
css布局的各种FC简单介绍:BFC,IFC,GFC,FFC
什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context,块...
2018-05-17
bootstrap PrintThis打印插件使用详解
bootstrap PrintThis打印效果图: 如图,这个是调用了谷歌的打印,使用很方便,可以自己調样式,需要的可以研究一下,这边贴出使用方法。 附上GitHub:https://github.com/jasonday/printTh...
2017-03-16
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
html5+JavaScript教程-微信打飞机小游戏源码
js // JavaScript Document var c = document.getElementById("dotu"); var cxt = c.getContext("2d&q...
2015-11-12
为什么要选择Nodejs?Nodejs有什么好处?
什么?JavaScript还能用作服务器编程! Caleb Madrigal是来自美国密尔沃基市的一名软件顾问。四年前,他在听说“将JavaScript用作服务器端语言”这样的说法时,认为那是一个荒唐的想法。有那么多服务器端语言可供选择,为...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
请前往任务中心完善资料即可激活会员
登录后,点击右上角的用户名,在下拉菜单中可以进去“我的任务” 注册自动激活,本站没有VIP!没有充值!没有推广任务等等 回复即可下载 ...
2015-11-18
2015年JavaScript或“亲库而远框架”
2014年过去了,作为一个JavaScript开发者很难满怀信心的去“挽回”一个特定的库或技术,即便是强大的Angular,似乎也因为最近的一些事情而动摇。 2014年10月的ng-europe会议上,Angular开发者团队透露了一个关于...
2015-11-12
回到顶部