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

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

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

Small_Mouse0
小鼠标丶 能截到图说明流程没问题,,和预期不符说明参数传的可能有问题
5 个月之前 回复
mufeng633
沐风Cc 回复小鼠标丶: 没有报错,就是截取的图片和预期的不符合,也不知道原因
5 个月之前 回复
Small_Mouse0
小鼠标丶 回复沐风Cc: 有报错?,,,现在要看你的这个插件用的对不对了【html2canvas】
5 个月之前 回复
mufeng633
沐风Cc 现在出现的问题是,前端截图都有问题。截出来的图片不是预想的那样,我更新了这个情况,你可以看下问题的最后面
5 个月之前 回复
Small_Mouse0
小鼠标丶 回复沐风Cc: 是的,,都post了为何还要放链接里,,万一图片大点,就不好了,,只要能保证传上去的数据没问题,,解密也能保证没问题,,还有可能出现什么问题尼?
5 个月之前 回复
mufeng633
沐风Cc 你的意思 传递的参数是放到 data里面吗
5 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
html2canvas 截图 图片为空白 无法截图
html2canvas 截图 图片类型为空白 解决办法 图片地址不是本地图片是网络图会出现 截取后为空白的情况 1.此时可以让后台返给你base64的图片地址就可以截取了 2.做个静态转化 先存在本地然后在调用 ...
html2canvas截图下载问题
111.php点下载可以截图,想改成点下载去截222.php的画面,要怎么改?rn111.phprn[code=html]rn rn rn rn rn rn rn rn MyHtml.html rn rn rn rn rn rn rn rn rn rn rn rn rn 此网页演示了html2canvas截图后将截图后的网页追加到了原网页之上 rn rn rn 这里可以看作是边界线 rn rn 下载 rn rn rn[/code]rn222.phprn[code=html]rn rn rnrn rn rn rn rn rn rn rn 2222222222222222 rn 2222222222222222 rn 2222222222222222 rn rn rn[/code]
网页转图片--- html2canvas截图
最近有个做在线名片(可保存图片至本地)的任务,特意研究了一下图片生成,也踩了几个坑。特此总结一下,顺便分享一下demo:   链接:https://pan.baidu.com/s/1o98UBJO 密码:s0hz   其中也遇到了一些坑比如查询网上的 html2canvas  使用方法,发现很多人总结的方法做出来的图很模糊,或者不支持移动端。最后发现官方API给的方法可用,但是用官方给
html2canvas截图如何解决图片跨域的问题
html2canvas截图如何解决图片跨域的问题
html2canvas截图如何解决图片跨域的问题?
解决html2canvas截图图片跨域的问题
HTML2canvas截图
HTML2canvas截图
html2canvas图片截图截不到图像的问题解决
解决思路: 在回显图片后,给img标签动态的加上crossOrigin="anonymous"属性 然后 服务端开启跨域response.setHeader("Access-Control-Allow-Origin","*"); 并且开启CORS(重要) 前端等图片加载完后再截图(重要) 截图JS代码(会来百度的都看的懂):userCORS记得开起来,很重要!!! html2can...
html2canvas截图的问题
[code=javascript]var takeHighResScreenshot = function(srcEl, scaleFactor) rn // Save original size of elementrn var originalWidth = srcEl.offsetWidth;rn var originalHeight = srcEl.offsetHeight;rn // Force px size (no %, EMs, etc)rn srcEl.style.width = originalWidth + "px";rn srcEl.style.height = originalHeight + "px";rnrnrnrn // Create scaled canvasrn var scaledCanvas = document.createElement("canvas");rn // scaledCanvas.webkitImageSmoothingEnabled = false;rn // scaledCanvas.mozImageSmoothingEnabled = false;rn // scaledCanvas.imageSmoothingEnabled = false;rn scaledCanvas.width = originalWidth * scaleFactor;rn scaledCanvas.height = originalHeight * scaleFactor;rn scaledCanvas.style.width = originalWidth + "px";rn scaledCanvas.style.height = originalHeight + "px";rn var scaledContext = scaledCanvas.getContext("2d");rn scaledContext.scale(scaleFactor, scaleFactor);rn var width = $(window).width();rn var height = $(window).height();rn rn html2canvas(srcEl, rn canvas: scaledCanvas,rn width : width,rn height : height,rn allowTaint: false,rn taintTest: false,rn proxy: "/proxy.php",rn logging: true,rn onrendered: savern );rn [/code]rnrn[code=javascript]takeHighResScreenshot($(".editor-stage")[0], 1);[/code]rnrn使用html2canvas截图,如果我不加canvas属性,分辨率有问题rn加了后截图会与视区的大小关联,大多数时候不能截到全部的图像rnhtml2canvas的原理是什么,特别是canvas这个属性在里面代表什么,我传入的是1,缩放自己的1倍rn
html2canvas js截图并下载
在网上找了一些js截图的插件,最终选择了html2canvas。           首先介绍一下这个这个插件在浏览器上的兼容性:- Firefox 3.5+ - Chrome+ - Opera+ - IE9+; 然后简单介绍一下其截图的原理:html2canvas通过获取页面的DOM和元素的样式信息,并将其渲染成canvas图片,从而实现给页面截图的功能。它不需要来自服务器任何渲染,整
使用html2canvas实现浏览器截图
实现功能:点击按钮,实现截取当前页的功能。使用html2canvas插件机可以实现该功能。 1、在html中引入html2canvas插件 2、部分html如下: 截取当前页3、js如下:(先引入jquery) $('button').click(function(event){ event.preventDefault(); // 生成im
html2canvas页面生成base64,springboot后台转成图片
function createImage(name){ $(&quot;#createImage&quot;).removeClass(&quot;current_s&quot;); var baseDiv = document.querySelector('#baseDiv'); var width = baseDiv.offsetWidth;//div宽 var height = baseDiv.o...
使用html2Canvas实现截图功能
通过JS就能截屏,这是Html2canvas为用户提供的一个便捷的神器,通过对DOM元素的信息提取渲染 使用例子 : html2canvas($("#bg"), { onrendered: function (canvas) { var url = canvas.toDataURL(); //base64数据 var image = new Image(); image.src =
前端js截图;html2canvas;jcrop
Javascript,使用jcrop插件和html2canvas实现前端浏览器截图效果
html2canvas网页截图工具
html2canvas网页截图工具,通过JS就能截屏,这是Html2canvas为用户提供的一个便捷的神器,通过对DOM元素的信息提取渲染页面 带有回掉函数的使用方法: html2canvas(element, { onrendered: function(canvas) { // canvas 是最后一个渲染的<canvas> 元素 } });
html2canvas截图微信头像
方案一:html代码,利用img标签的crossorigin属性 &amp;lt;img v-if=&quot;''!=wxAvatar&quot; class=&quot;avatar&quot; :src=&quot;wxAvatar&quot; crossorigin=&quot;anonymous&quot;&amp;gt; 微信头像,指向微信的头像地址,跨域请求资源,资源可以显示,但是html2canvas会有跨域的问题,主要利用是 crossorigin=&quot;anonymou...
html2canvas 截图内容不正确
需求是将整个手机页面进行截图,然后在微信浏览器长按保存,截图完成后,发现截图部分正确,后来发现是要在页面所有元素加载完整后再去截图,那样截出来的图片就不会问题了,用到了   window.onload=function() {}&amp;lt;script &amp;gt; window.onload=function() { html2canvas(document.querySelector(...
html2canvas截图js
利用javascript实现页面截图(html2canvas.js资源) 用法: html2canvas(document.body, { allowTaint: true, taintTest: false, onrendered: function(canvas) { canvas.id = "mycanvas"; //document.body.appendChild(canvas); //生成base64图片数据 var dataUrl = canvas.toDataURL(); var newImg = document.createElement("img"); newImg.src = dataUrl; document.body.appendChild(newImg); } });
html2canvas 网页截图
场景:  项目中需要提供多某些图表的截图功能,查找资料发现 html2canvas 是一个很好用的前端截图方法,利用jquery和html5的结合,便可以在前端直接生成图片保存,不需要后台交互用图片流等复杂操作 步骤: 1,引入js文件    2,准备好截取的 Dom元素,如要截取 id =  tbl_exception 的div
html2canvas 网页截图示例
一个简单的利用html2canvas 根据Dom元素在前端实现自由截图
html2Canvas页面截图
1、下载一个html2canvas.min.js. 2、饮用后使用方法如下 $(function(){ var content = $("#content"); html2canvas(content,{ onrendered: function(canvas) { var image = new Image();//新建一个img标签
html2Canvas截图不清晰
//这里用的是0.5的版本,另源码有修改,已提交至网盘,指路下载: 链接:https://pan.baidu.com/s/1kQeIbk7isDilN9kkSH_1oA 密码:tsqk var utils = { complete(completeBase) { let canvas = document.createElement("canvas"),...
Html2Canvas截取地图截图
function output() { var isfirst = true; //画布转img function convertCanvasToImage(canvas) { var image = new Image(); ...
【踩坑】为base64编码的图片生成截图不显示
问题在effevo中设置个人头像时,会有无法显示的情况,还不稳定重现,终于抓到问题原因,下面分享下解决方法解决方法先看下原始写法var imgBase64='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFOSURBVFhH7ZOx
图片跨域配合html2canvas生成截图,并且解决安卓上图片模糊的问题。
&lt;div class="codeView"&gt; &lt;!-- 要生成截图的div --&gt; &lt;div class="codeBox" id="codeBox"&gt; &lt;div class="code_usser"&gt; &lt;div class="code_photo_Box"&gt; ...
html2canvas截取图片发送后台
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; div{height:800px;} ...
截图工具,用于试验报告,图片一系列截图
好用功能强大的截图工具,可以任何截图。占用资源少!实用
C#仿QQ截图 图片 截图 .net
System.Windows.Forms.PictureBoxSizeMode.AutoSize; this.picbox.TabIndex = 0; this.picbox.TabStop = false; // // fullScreenBtn // this.fullScreenBtn.Location = new System.Drawing.Point(0, 0); this.fullScreenBtn.Name = "fullScreenBtn"; this.fullScreenBtn.Size = new System.Drawing.Size(96, 32); this.fullScreenBtn.TabIndex = 1; this.fullScreenBtn.Text = "全屏截取"; this.fullScreenBtn.Click += new System.EventHandler(this.fullScreenBtn_Click); // // mouseCaptureBtn // this.mouseCaptureBtn.Location = new System.Drawing.Point(120, 0); this.mouseCaptureBtn.Name = "mouseCaptureBtn"; this.mouseCaptureBtn.Size = new System.Drawing.Size(96, 32); this.mouseCaptureBtn.TabIndex = 2; this.mouseCaptureBtn.Text = "鼠标截取"; this.mouseCaptureBtn.Click += new System.EventHandler(this.mouseCaptureBtn_Click); // // ClearBtn // this.ClearBtn.Location = new System.Drawing.Point(240, 0); this.ClearBtn.Name = "ClearBtn"; this.ClearBtn.Size = new System.Drawing.Size(88, 32); this.ClearBtn.TabIndex = 3; this.ClearBtn.Text = "清除截取图片"; this.ClearBtn.Click += new System.EventHandler(this.ClearBtn_Click); // // saveBtn // this.saveBtn.Location = new System.Drawing.Point(352, 0); this.saveBtn.Name = "saveBtn"; this.saveBtn.Size = new System.Drawing.Size(96, 32); this.saveBtn.TabIndex = 4; this.saveBtn.Text = "保存截取图片"; this.saveBtn.Click += new System.EventHandler(this.saveBtn_Click); // // aboutBtn
比较两张图片及截图
比较两张图片:图片比较及截图代码,可以非常精确地发现图片是否一致,哪怕一个像素。可用于识别真伪,判断界面变化,行情到到账判断等。
asp.net 图片截图
C#,asp.net 图片截取 参考博客解说 http://blog.csdn.net/suntanyong88/article/details/6909435
c# winform 图片截图
最近在研究winform的截图功能,做了一个相对简易的截图,编辑文字,画箭头的功能,代码相对简单,有兴趣的朋友可以看看,今后也会逐步丰富功能。
QQ图片截图自动保存
软件很小,使用简单,非常方便。 喜欢用QQ截图的朋友欢迎收藏,用QQ截图后按shift自动保存截图的图片,节省了很多的保存粘贴步骤,特别适用截很多图的时候。 已经在本机使用过,确实好用,值得推荐!不说了,说多了会感觉我很唠叨的 希望软件能给大家带来方便,共同学习QQ群:76740433 QQ截图 截图保存 QQ截图保存 剪贴板图片保存 QQ快速截图
截图和图片查看工具
仔细想想,要一口气做点有价值的东西,难度还是挺大的,倒不如模仿别人做些简单的东西看看。 只是为了练练手,所以设计上不是很美观,不过实用性还是有点的。 这个工具的代码我总共用了四个类来实现: 首先是Screenshot.java文件,主要显示操作界面,有一个菜单栏和4个菜单选项; 然后是ScreenFrame.java文件,功能是进行截图操作; 接着是ScreenAll.java...
长图片截图工具
长图片截图工具。老外开发的,绿色版。很实用。!!
滚动截图工具大图片截图
可以截获大于屏幕的图片。是个非常好使用的截图工具。
图片截图工具
图片截图工具,方便快速,且可节省空间,方便快速,推荐。
图片截图软件
这个截图软件是本人在建模过程中是必不可少的一个软件,它可以在你建模的时候提高很大的工作效率。
模板匹配程序源代码及图片截图
大家http://www.ilovematlab.cn/thread-42938-1-1.html查看截图。
java实现图片截图
1.准备 需求,形成1天每个小时的画像,并合成一个图片。 思路:每个小时抽取一张图片,再把这种图片截取1/24并存放,后面,再把这24张图片合成一张图片。 准备一张原图 截图前: 截图后:(下午14点的截图) package com.qihui.qxj.utils; import java.awt.Rectangle; import java.a...
RichEdit 截图图片的信息
有谁知道截图图片粘贴到RichEdit后怎么获取截图图片的详细 信息的没?rn用 REOBJECT reobj=0;rn reobj.cbStruct=sizeof(REOBJECT);rn m_edChat.GetIRichEditOle()->GetObject(i,&reobj,REO_GETOBJ_POLEOBJ);rn获取的话reobje.polesite和reobj.pstg都是NULL的 无法获取STATSTG得到相关信息,有高手能帮忙的没?rn
拍照并截图图片
有很多应用需要设置用户头像,这个小代码就实现了选取相册图片或者拍照后再截取图片作为头像。有需要的朋友可以借鉴一下,gb编码
相关热词 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池 c#5.0 安装程序 c# 分页算法