1.描述问题场景
使用 html2canvas.js 工具,进行局部截图,将获取到的Base64码
利用ajax传递到后台进行解码,并输出到指定目录。
2.问题:
在将Base64传递到之后,进行解码后,下载的图片和截取的图片不一致问题。还请各位大佬看下什么原因
3.代码
前端:
js部分
function jietu() {
var gdzherf = '';
html2canvas(document.getElementById("container"),{
useCORS:true,
height: $("#container").outerHeight() + 20,
width: $("#container").outerWidth() + 20 ,
onrendered : function (canvas) {
//获取Base64码
gdzherf = canvas.toDataURL();
$("#base64Name").val(gdzherf);
$("#mmg").attr("src",gdzherf);
//去下载
$.ajax({
type : "post",
url : "${basePath}moduleFile/downloadCanvas?gdzherf="+gdzherf,
dataType : "json",
success : function (data) {
}
})
}
})
};
<div id="container" style="color: #FF0000;display: inline-block; width: 300px;height: 120px" >
<div class="text"> 此<span class="sp"> </span>页复印于我馆 </div>
<div class="text">
<div class="qq"> 全宗<span id="FONDS_CODE" class="sp" style="display:block"></span>
目录<span id="CATALOGUE_NO" class="sp"></span>
案卷 <span id="FOLDER_NO" class="sp"></span>
第<span id="PAGE_NO" class="sp"></span>页
</div>
</div>
<div class="text date">
上海市xxxx档案证明专用章
</div>
<div class="date">
<span id="year"></span>年<span id="month"></span>月<span id="day"></span>日
</div>
</div>
<a onclick="jietu()" class="easyui-linkbutton" style="width:80px">截图</a>
产生的效果:
再次验证:
结论:拿到前端获取的Base64数据去转换,与预期想的一致,没有问题
4.现在用我的后台代码进行解码,图片与预期不符合
public void download(HttpServletRequest request) throws IOException {
String gdzherf = request.getParameter("gdzherf").replace("data:image/png;base64,",""); // Base64码
BASE64Decoder decoder = new BASE64Decoder();
byte[] bs = decoder.decodeBuffer(gdzherf);//解密
//生成到目标路径
for(int k=0;k<bs.length;++k)
{
if(bs[k]<0)
{//调整异常数据
bs[k]+=256;
}
}
String path = "C:\\Users\\Cc\\Desktop\\对比gc\\截图.png";
OutputStream out = out = new FileOutputStream(path);
out.write(bs);
out.flush();
out.close();
}
下图是: 通过获取到的Base64 参数 下载的图片
可以看出,**自己解码下载的文件,与前端截图的问题是不一致的**,我自己猜想是**参数传递参数问题**,我把**前端生成的Base64代码 拷贝到后台直接进行解码获取到的图片就是我想要的结果**, 问题应该就是出在传递参数过程中,不知各位有什么好的解决方法码?
下图是通过前端拷贝的Base64,在后台直接解码出来的图片:
还请教各位如何处理这个Base64 参数问题,如果是因为其它问题,还请不吝赐教,谢谢各位
现在本机自己的项目 获取的图片与前端生成的图片一致了。但是如果放到公司的项目中,则就出现了下面的情况,不知道原因是啥?
如图: