使用html2canvas截图生成的Base64 参数,传递到后台,解析之后下载的图片和截图的图片不一致问题 10C

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">&nbsp;&nbsp;&nbsp;此<span  class="sp">&nbsp;</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>
                &nbsp;案卷 <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 参数问题,如果是因为其它问题,还请不吝赐教,谢谢各位


现在本机自己的项目 获取的图片与前端生成的图片一致了。但是如果放到公司的项目中,则就出现了下面的情况,不知道原因是啥?
如图:

图片说明

2个回答

可以检查下
1、确定图片格式是png的 如果不确定可以 .replace(/^data:image\/\w+;base64,/, "");
2、post过程中 有可能把 base64的 +换成空格了 base64Data = imgData.replace(/\s/g,"+");
我用的nodejs 但实现方式应该都一样 仅供参考:
https://blog.csdn.net/ihtml5/article/details/25729217

uk_51
风不二 回复沐风Cc: 图没看明白你是说服务端的图片 没显示出来嘛? 箭头是什么意思
6 个月之前 回复
mufeng633
沐风Cc 按照你说的方式,我在我自己项目中测试通过了。但是如果把代码放到正式服务器中,前端截取的图片就出现问题了,不知道咋回事,详情看 问题更新
6 个月之前 回复
mufeng633
沐风Cc 好的,我测试一下,谢谢老哥
6 个月之前 回复

题主为何将参数放链接里,,链接方式传数据是损失的(有上限)

对比下后台接受的图片数据是否与前端上传的一致、

Small_Mouse0
小鼠标丶 能截到图说明流程没问题,,和预期不符说明参数传的可能有问题
6 个月之前 回复
mufeng633
沐风Cc 回复小鼠标丶: 没有报错,就是截取的图片和预期的不符合,也不知道原因
6 个月之前 回复
Small_Mouse0
小鼠标丶 回复沐风Cc: 有报错?,,,现在要看你的这个插件用的对不对了【html2canvas】
6 个月之前 回复
mufeng633
沐风Cc 现在出现的问题是,前端截图都有问题。截出来的图片不是预想的那样,我更新了这个情况,你可以看下问题的最后面
6 个月之前 回复
Small_Mouse0
小鼠标丶 回复沐风Cc: 是的,,都post了为何还要放链接里,,万一图片大点,就不好了,,只要能保证传上去的数据没问题,,解密也能保证没问题,,还有可能出现什么问题尼?
6 个月之前 回复
mufeng633
沐风Cc 你的意思 传递的参数是放到 data里面吗
6 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!