Html5截屏功能，后台保存

最新推荐文章于 2025-11-03 22:30:30 发布

原创最新推荐文章于 2025-11-03 22:30:30 发布 · 3k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

功能实现专栏收录该内容

3 篇文章

订阅专栏

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

最近项目需要做截屏功能，然而不是做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();
	html2canvas(document.body, {
		allowTaint: true,
		taintTest: false,
		onrendered: function(canvas) {
			canvas.id = "mycanvas";
			//生成base64图片数据
			var dataUrl = canvas.toDataURL();
			var newImg = document.createElement("img");
			newImg.src =  dataUrl;
			var pos = dataUrl.indexOf("4")+2;
			dataUrl = dataUrl.substring(pos, dataUrl.length - pos);//去掉Base64:开头的标识字符
			$.ajax({
				type: "POST",
					url:"",
					async: false,
					data: { 'base64StrImgData': dataUrl},
					dataType: "text",
					beforeSend: function (request) {
				},
				success: function (data) {
				
				}
			});
		}
	});
});

后台

对于后台，该博客使用的是sun.misc.BASE64Decoder.jar来解析Base64图片URL。但在项目构建过程中，发现Sun公司的sun.misc.BASE64Decoder.jar是非开源jar包，在maven库没有该包，而且通过资源显示说sun.misc.BASE64Decoder该包安全性不高、又没有开源，所以十分不推荐使用。

所以解析Base64图片URL的时候，使用另外一个jar包解析commons-codec-1.10.jar。注意不要使用到JDK的包，可能由于项目迁移JDK版本不一样或不存在而报错。

以下是主要的后台保存图片代码。

// Base64解码
org.apache.commons.codec.binary.Base64 base64 = new org.apache.commons.codec.binary.Base64();
byte[] bytes = base64.decode(base64StrImgData);
//图片流输出到本地某个位置
OutputStream o = new FileOutputStream("a.jpg");
o.write(bytes);
o.flush();
o.close();

maven pom.xml配置

<dependencies> 
    <!-- Base64编码需要 --> 
    <dependency> 
        <groupId>org.apache.commons</groupId> 
        <artifactId>codec</artifactId> 
        <version>1.10</version> 
        <scope>system</scope> 
        <systemPath>${project.basedir}/lib/commons-codec-1.10.jar</systemPath> 
    </dependency> 
</dependencies>

对于遇见的一个奇葩问题

我遇到了html2canvas截屏时丢失样式的问题。

但搜索发现出现此问题提问的贴都没有人回答，经过自己的研究总结发现是由于我使用了CSS3的样式没有写入浏览器兼容性样式，导致截屏时样式解析出错（这也是自己写的前端考虑不够周全的问题）。样式应该考虑到兼容性问题，例：

background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#fff));
background-image: -webkit-linear-gradient(#fff,#fff);
background-image: -moz-linear-gradient(#fff,#fff);
background-image: -ms-linear-gradient(#fff,#fff);
background-image: -o-linear-gradient(#fff,#fff);
background-image: linear-gradient(#fff,#fff);