html5中如何实现页面截图
导读:本文共4151.5字符,通常情况下阅读需要14分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 一、导入html2canvas.js也可以直接导入链接: <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>使用起来也非常简单,具体的API可以去网上查找,生成png图片使用“image/png”即... ...
目录
(为您整理了一些要点),点击可以直达。一、导入html2canvas.js
也可以直接导入链接: <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
使用起来也非常简单,具体的API可以去网上查找,生成png图片使用“image/png”即可。
其中$("#xxx")为你想要截取的div,外面可以通过jquery获取它,当然document获取也是可以的。
其它类型的图片如jpg,为image/jpeg等等,可自行查询API。
到这里其实简单的截图已经完成了,如果界面稍微复杂一点的话,可能就会出现各种坑,下面一个一个解决。
二、svg无法截取的问题
当我们截取一个div时,如果这个div中存在svg标签,一般情况下是截取不到的,比如截取一个流程图,得到的是下面这个样子:
可以看到,流程图的线没有截取到,也就是svg没有截取到,这时的解决方法是把svg转换成canvas再进行截图即可,直接上代码。
这里的each循环是循环所有的svg标签,将它们全部转换为canvas:
这里需要用到 canvg.js
,以及它的依赖文件rgbcolor.js
,网上可以直接下载,也可以直接导入。
三、背景透明的问题
这个其实很简单,因为它默认是透明的,html2canvas中有一个参数background就可以添加背景色,如下:
四、只能截取可视部分的问题
如果需要截取的div超出了界面,可能会遇到截取不全的问题,如上图,只有一半的内容,这是因为看不到的部分被隐藏了,而html2canvas是无法截取隐藏的dom的。
所以此时的解决办法是使用克隆,将需要截取的部分克隆一份放在页面底层,再使用html2canvas截取这个完整的div,截取完成后再remove这部分内容即可,完整代码如下:
这里外面首先将要截取的 div 克隆一份,并将 z-index 设置为最小,避免引起界面的不美观,然后是对 svg 进行的处理,上面已经分析过了,最后将克隆节点追加到 body 后面即可。
在 onrendered 中,我们可以直接使用 location.href 跳转查看图片,可以进行保存操作,也可以将 url 写入 img 的 src 中显示在界面上,如 $('#imgId').attr('src',url);
最后可以在界面展示刚刚截取到的图片:
五、上传图片保存到数据库,并在界面中获取该图片显示
现在得到 url 了,需要上传到后端,并存到数据库中,再另一个展示的界面中加载该图片。我一般习惯于使用 url 来存储图片路径,而不是用 blob 存储。
因为需要在另一个界面中获取图片,所以我把图片存在了与 webapp 同级的一个 resource 目录下,代码如下:
这里因为涉及到其它逻辑,所以只放一部分代码。
这里使用的是 BASE64Decoder 来存储图片,我们获取到图片后,需要使用 substring 将“data:image/png;base64,”的内容截取掉,因为“,”后面才是图片的url, url.substring("data:image/png;base64,".length())
。
对于路径,上面代码中的url是我存储到数据库中的内容,而 totalUrl 就是实际进行 ImageIO 的 write 操作时存储的真实路径, getProperty() 方法获取的项目的根目录,可以在 web.xml 中配置如下内容,然后 System.getProperty("root") 即可。
现在图片的 url 就存到数据库里了,而图片本身就存储在 tomcat 下该项目的这个目录下。
最后外面在界面上获取,只需要在当前的url前面加上项目名即可 < img class ="depot-img" src ="<%=request.getContextPath()%>/`+e.proPic+`" >
。
html5中如何实现页面截图的详细内容,希望对您有所帮助,信息来源于网络。