Html5截屏功能，后台保存

最新推荐文章于 2024-07-27 04:39:20 发布

Kevin-Gem

最新推荐文章于 2024-07-27 04:39:20 发布

阅读量2.8k

点赞数

分类专栏：功能实现

本文链接：https://blog.csdn.net/Vickey_heng/article/details/81115490

版权

项目中需要实现HTML5截屏功能，通过html2canvas.js完成前端截图，并以base64格式发送到后台。原博文中提供的html2canvas.js可能存在远程访问问题，建议本地保存使用。在后台解析base64图片时，不推荐使用sun.misc.BASE64Decoder，推荐使用commons-codec-1.10.jar进行解析。在实际操作中，遇到html2canvas截屏时样式丢失的问题，原因是CSS3样式未写入兼容性样式导致。

摘要由CSDN通过智能技术生成

最近项目需要做截屏功能，然而不是做APP调用设备截屏，所以截图通过HTML来实现，经过查询资料，记录一下。

资料来源 https://blog.csdn.net/qq_27818157/article/details/53195933

由于远程JS html2canvas.js 可能访问不到，所以https://blog.csdn.net/gongqinglin/article/details/78563901提供了html2canvas.js源码。（整一份copy出来，创建一个html2canvas.js即可）

这里直接下载这个js

链接: https://pan.baidu.com/s/19njUZ5wTjjYnXgTtY2-Uug

提取码: v451

前端

前端调用js的方法，将生成图片以base64格式传输到后台

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>

//截屏
$("#screenBtn").on("click", function(event) {
	event.preventDefault()