html2canvas 返回的toDataURL()数据为 data:,的解决方法

最新推荐文章于 2023-12-19 14:02:43 发布
最新推荐文章于 2023-12-19 14:02:43 发布
阅读量4k 收藏 2
点赞数 3
分类专栏： html2canvas 文章标签： js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/java123_PB/article/details/108214634
版权

html2canvas 返回的toDataURL()数据为 data:,的解决方法

我在使用html2canvas的使用， 发现toDataURL() 返回的数据为data:, 而且将数据设置为img的src属性，图片也不能正常显示，我尝试了很多方法，也没有解决出来，经过我不断的百度+自己尝试，终于解决了这个问题。

代码：

在这里插入图片描述

这段代码是没有任何问题的，标准html2canvas的demod代码，但就是无法正常将图片previewImg 渲染出来，dataURL 我打印的结果为 data:,
错误的原因是，这个 要截图的原dom元素this.$refs.imageTofile没有设置宽高，
在这里插入图片描述

我设置

最低0.47元/天 解锁文章
java123_PB
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html2canvas 来 生成 canvas 元素，然后 利用 canvas 的 toDataURL(‘image/jpeg’) 方法，将 canvas 元素 生成 图片base64格式的 url
qwe19991123的博客
05-05 1181
<template> <div> <!-- 卡片部分 --> <button @click="generateImages">点击生成图片并将图片保存在本地</button> <div class="card"> <div class="card_head"> <p>姓名：</p> <p>张三丰</p>
java todataurl,canvas.toDataUrl（）返回'data :,'
weixin_26712065的博客
02-27 960
I am trying to resize an image and get back the base64 string representation using canvas.toDataUrl().My code is as follows (see below). My issue is that every time when I first initiate it, it return...
【前端】html2canvas生成图片空白排查data:；（js vue react uniapp）
m0_37628223的博客
06-27 3790
后面一步一步地排查，发现是页面内容太多了，删减一点内容就能显示出来。然后我又去认真看了下html2canvas的各个参数，发现可以通过调整scale来改善。因为要做一个分享图，就用到了html2canvas，一开始是好好的，今天随便测了下，发现图片显示不出来了。打印了下，生成的图片链接变成了。可以先检查下所选dom中的图片是否跨域，如果跨域了，可增加设置useCORS:true。
uni-app APP、html引入html2canvas截图以及截长图
weixin_37391237的博客
06-09 5341
script的module的名称可以随便取，module=(值任意，相当于命名空间，之后会根据这个名字调用其中的方法),但是change:参数名称必须和module保持一致，虽然不会阻断renderjs的运行，但是会报错，也会导致无法捕获数据的变化。对于UNI APP端的开发而言，由于上并没有document，不能进行相关的DOM操作，同时有关DOM渲染的第三方库(echart、openlayer、canvas等)也无法有效的使用，因此官方推出了renderjs方案，来解决上述问题。
关于html2canvas 转base64有时候出现“data：”现象
qq_38904099的博客
09-06 3727
本人就是遇到这种现象了 发现第一次是可以成功取到 ，但是第二次进入该页面就出现“data，：”   此处第二次datarl就转不成功 找了好多办法 也没解决。。。最后我是在跳转页面后把第一次加载的dom元素给remove掉了。发现没什么问题了 （这里肯定大佬解答下）   在接口返回成功的地方添加 就解决了问题  目前没什么问题出现 但是不知道为什么 懂的大佬指点下...
canvas的toDataURL()方法
热门推荐
first_shun的博客
06-14 6万+
canvas的toDataURL()方法是返回一个包含图片展示的 数据URL。可以使用type参数其类型，默认为PNG格式。图片的分辨率为96dpi。 一、语法 canvas.toDataURL(type, encoderOptions); 二、参数 1、type：图片格式，默认为 image/png,可以是其他image/jpeg等 2、encoderOptions：0到1之间的取值，主要用来选定图片的质量，默认值是0.92，超出范围也会选择默认值。 三、返回值 返回值是一个数据u...
html2canvas 截图空白 或出现toDataURL‘ on ‘HTMLCanvasElement或img标签没截下来 的所有解决办法
weixin_45721912的博客
08-31 2928
【代码】html2canvas 截图空白 或出现toDataURL' on 'HTMLCanvasElement或img标签没截下来 的所有解决办法。
html2canvas 在 ios13版本生成图片失效
纸飞机博客
02-17 3274
我能做的不多，但你需要的时候，我总是在的。 上图红色框中的部位为自定义的内容，剩余部分为背景图。 经测试，在安卓中，能如上图保存完整，在ios13系统以上失效。 解决方案： 1.将html2canvas的版本调整为如下： package.json中： "html2canvas": "1.0.0-rc.4", 修改后删掉node_modules重新装包。 2.需在生成的页面以至于上图的外层区域设置font-family font-family: Helvetica, Tahoma, Arial, 'P.
html2canvas的使用方法,html2Canvas使用总结
weixin_36173034的博客
06-15 3万+
需要将一个背景图+动态获取的文字+微信头像拼接成一张图片，用户可长按保存最终图片，难免就是要将html转换成图片。最初想要自己用canvas画，但是略麻烦，后来发现了html2canvas这个插件，先将html转成canvas，再生成图片。使用起来也很简单：setTimeout(function () {html2canvas($('#img_html')[0]).then(function (c...
今日学习知识点-canvas的toDataURL()方法
最新发布
Wsyzzzn的博客
12-19 1684
首先复习一下base64位编码，有时我们会先将图片转化为base64格式的情况，这样的好处是减少一张图片的http请求，但是相应的缺点就是转换之后会导致css文件体积增大，而css的体积会影响页面渲染，因此会导致白屏时间长。注：如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。用于设置转换为base64编码后图片的质量，取值范围为0-1，超出取值范围用默认值0.92代替；对象的一种方法，用于将canvas对象转换为base64位编码；
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
08-28
主要给大家介绍了关于利用canvas中toDataURL()将图片转为dataURL(base64)的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
将HTML5 Canvas的内容保存为图片借助toDataURL实现
09-28
`toDataURL()` 方法返回一个字符串，该字符串代表了Canvas画布当前的内容，格式通常是"data:image/png;base64,"开头，后面跟着Base64编码的图像数据。默认情况下，它会返回PNG格式的图像，但也可以通过参数指定其他...
快速解决Canvas.toDataURL 图片跨域的问题
09-02
此方法用于将Canvas元素的内容转换为一个data URL，通常是一个Base64编码的PNG或JPEG图像，可以嵌入到HTML或者用作下载链接。但当Canvas中绘制了来自不同源的图像时，调用`toDataURL`会抛出安全错误，因为浏览器认为...
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
09-22
这个方法可以将Canvas的内容转换为一个data URL，通常用于保存或上传图像。但是，如果Canvas上画的是跨域图片，调用`toDataURL()`会抛出安全错误，提示"tainted canvases may not be exported"。 这个问题的根本...
html2canvas中toDataURL方法返回值为：data,解决方案
SCscHero的博客
06-02 2198
阅文时长 | 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
HTMLCanvasElement.toDataURL()
sayyy的专栏
08-04 433
HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI。
html2canvas解决图片跨域问题,快速解决Canvas.toDataURL 图片跨域的问题
weixin_42322512的博客
06-07 2857
如题，在将页面的图片地址进行本地输出时(Html2Canvas.js)，因不同源存在跨域问题，会出现toDataURL访问权限问题：【Redirect at origin 'http://sub1.xx.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-All...
【基础知识】HTML5 Canvas API的toDataUrl()的使用（图文、演示）
苏一恒
08-16 5333
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门：https://github.com/827652549/CanvasStudy 方法介绍 HTMLCanvasElement.toDataURL()方法返回一个包含图片展示的 data URL。可以使用ty...
html2Canvas常见问题以及解决
沉淀，积累、进步
12-24 7889
html2Canvas常见问题以及解决:图片模糊，白边，跨域等等问题
canvas.toDataURL('image/jpeg', 1.0) 返回data:,
06-09
如果canvas.toDataURL('image/jpeg', 1.0)返回data:，可能是因为Canvas的大小超出了浏览器的限制，或者是因为Canvas中包含了跨域的图像资源。 浏览器对于单个Canvas的大小限制是有限制的，不同浏览器的限制大小也不同。如果Canvas的大小超出了浏览器的限制，就会导致toDataURL方法返回data:。这种情况下，可以尝试将Canvas的大小缩小或分割成多个小的Canvas进行处理。 如果Canvas中包含了跨域的图像资源，那么在使用toDataURL方法时就会受到浏览器的同源策略的限制，导致toDataURL方法返回data:。在这种情况下，可以尝试通过使用CORS（跨域资源共享）或代理服务器等方法来获取跨域的图像资源，然后再将其绘制到Canvas中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值