关于html2canvas 转base64有时候出现“data：”现象

最新推荐文章于 2024-06-02 19:15:09 发布
最新推荐文章于 2024-06-02 19:15:09 发布
阅读量3.7k 收藏
点赞数
文章标签： js js插件 html2canvas javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38904099/article/details/82465706
版权

本人就是遇到这种现象了 发现第一次是可以成功取到 ，但是第二次进入该页面就出现“data，：”

 

此处第二次datarl就转不成功

找了好多办法 也没解决。。。最后我是在跳转页面后把第一次加载的dom元素给remove掉了。发现没什么问题了 （这里肯定大佬解答下）

 

在接口返回成功的地方添加

就解决了问题  目前没什么问题出现 但是不知道为什么 懂的大佬指点下

It_渣渣宇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html2canvas 返回的toDataURL()数据为 data:,的解决方法
java123_PB的博客
08-25 4165
html2canvas 返回的toDataURL()数据为 data:,的解决方法 我在使用html2canvas的使用， 发现toDataURL() 返回的数据为data:, 而且将数据设置为img的src属性，图片也不能正常显示，我尝试了很多方法，也没有解决出来，经过我不断的百度+自己尝试，终于解决了这个问题。 代码： 这段代码是没有任何问题的，标准html2canvas的demod代码，但就是无法正常将图片previewImg 渲染出来，dataURL 我打印的结果为 data:, 错误的原因是，
html2canvas生成数据为“data:,“
qq_40557812的博客
07-20 1246
原因 页面处于隐藏状态，无法获取到对应的元素。 解决办法 在页面显示状态生成base64数据，然后再隐藏页面。
vue html2canvas生成base64图片和图片高度
最新发布
游九尘的博客
06-02 414
【代码】vue html2canvas生成图片。
html2canvas中toDataURL方法返回值为：data,解决方案
SCscHero的博客
06-02 2227
阅文时长 | 0.35分钟 字数统计 | 572字符 主要内容 | 1、引言&背景 2、解决方案 3、声明与参考资料 a) 应对问题 html2canvas插件中toDataURL方法返回值为：data:,的解决方案？ b) 应用场景 使用html2canvas需要将dom元素保存成图片的场景中。 c) 解决方案概述 博主前端用了elementUI组件，需要保存的dom元素是el-tabs下其中一个el-tab-pane。而触发保存图片的button是在另外一个el-tab-pane，点击这个butto
利用canvas图片压缩 转base64
qq_44766377的博客
06-07 2637
canvas 压缩 图片 并以base64上传
html2canvas导出图片踩坑解决导出截屏的长度和图表导出空白
ycg的博客
01-11 1223
html2canvas官网 最近要将一个页面的所有数据导出成图片，，踩了不少坑， 百度了不少，不是导出时只能导出眼前所看的数据，就是导出全部时没办法导出图表数据差点搞炸了，看了官网后发现 windowHeight这个东西可以控制截屏的长度就可以解决， y和X这个东西控制的是截图的偏移感觉没啥用， useCORS自然开启的是跨域不用多说 scale 好像是放大但好像没啥用 downloadResult(name) { let canvasID = document.querySelector("#mia
html2canvas截图js
04-09
利用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); } });
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
12-30
在用canvas将png图片转jpeg时，发现透明区域被填充成黑色。 代码如下： XML/HTML Code复制内容到剪贴板 <p>Canvas：  <canvas u00a0id=canvas style></canvas>    <p>Base64转码后的图片：  ...
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
11-27
将图片转为base64的好处 将图片转换为Base64编码，可以让你很方便地在没有上传文件的条件下将图片插入其它的网页、编辑器中。 这对于一些小的图片是极为方便的，因为你不需要再去寻找一个保存图片的地方。 将图片...
canvas压缩图片转换成base64格式输出文件流
08-31
3. canvas.toDataURL方法的使用：canvas.toDataURL方法是canvas元素的方法，用于将canvas元素的内容转换成指定的图片格式的data url， 也就是base64编码串。canvas.toDataURL方法最多接受两个参数，并且这两个参数都...
canvas压缩图片转base64
qq_35431814的博客
07-08 691
canvas压缩图片转base64 //压缩图片 function ComporessImg() { } ComporessImg.prototype = { //base64Url 图片base64 size大小 yasuo: function (base64Url,callBack) {//callBack 回调函数 var img = new Image...
各种文件用JS转Base64之后的data类型
weixin_30745641的博客
12-21 606
1.txt data:text/plain;base64, 2.doc data:application/msword;base64, 3.docx data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64, 4.xls data:applicati...
【前端】html2canvas生成图片空白排查data:；（js vue react uniapp）
m0_37628223的博客
06-27 3896
后面一步一步地排查，发现是页面内容太多了，删减一点内容就能显示出来。然后我又去认真看了下html2canvas的各个参数，发现可以通过调整scale来改善。因为要做一个分享图，就用到了html2canvas，一开始是好好的，今天随便测了下，发现图片显示不出来了。打印了下，生成的图片链接变成了。可以先检查下所选dom中的图片是否跨域，如果跨域了，可增加设置useCORS:true。
html2canvas 相关问题踩坑
yemuxia_sinian的博客
05-24 5759
最近公司项目有个需求是：弹窗的时候要把一些信息合成为图片然后再进行分享等操作，其中信息包括微信头像，昵称等。项目是用vue来搭建的，要合成的区域如下：弹窗的主要html如下：&lt;div class="success-wrap" :class="{opacity:successShow}"&gt; &lt;div class="shadow"&gt;&lt;/div&gt; &lt;
一文看懂 Base64编码及全面解析data URI scheme
CodingYuan开发笔记
07-09 2340
Base64编码 Base64是一种十分流行的编码方式，仅仅使用 64 个字符加等号(=) 就可以以文本的形式表示所有的二进制数据了，因为它能够把二进制格式通过编码转换成可见字符，所有我们就可以通过的把二进制格式比如图片，文件等通过 base64编码然后通过文本的形式共享出去，是不是很神奇呀。不知道什么是base64编码吗？简单地说它把一些 8-bit 数据翻译成标准 ASCII 字符，往上有很多免费的 base64 编码和解码的工具，你也可以用 PHP 的 base64_encode() 进行编码：
vue使用html2canvas生成图片 以及图片转Base64 Base64转文件
weixin_59685936的博客
08-28 827
vue使用html2canvas生成图片 以及图片转Base64 Base64转文件
html2canvas的使用方法,html2Canvas使用总结
热门推荐
weixin_36173034的博客
06-15 3万+
需要将一个背景图+动态获取的文字+微信头像拼接成一张图片，用户可长按保存最终图片，难免就是要将html转换成图片。最初想要自己用canvas画，但是略麻烦，后来发现了html2canvas这个插件，先将html转成canvas，再生成图片。使用起来也很简单：setTimeout(function () {html2canvas($('#img_html')[0]).then(function (c...
vue 导出 pdf jspdf + html2canvas 报错 Supplied Data is not a valid base64-String jsPDF
qq_39086076的博客
11-22 6192
解决办法： 如图 看下 canvas打印出来数据 看下宽和高是否都存在 我就是因为宽不存在 所以报错 然后设置好宽和高就没问题了
vue2中，html2canvas组件的使用——实现截图并保存到本地
weixin_44867717的博客
07-04 3890
vue组件
html2canvas转base64然后调用ios的方法分享
05-25
要在iOS上分享HTML2Canvas生成的base64图像，您可以使用以下步骤： 1. 将base64图像数据传递给Objective-C代码 在您的JavaScript代码中，将base64数据传递给Objective-C代码： ```javascript // 使用base64数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值