Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvases may not be exported.

Intro

我在使用qrcode.react测试使用文本生成二维码的功能。

当执行以下API时，报错：

let domTarget = event.target;
let text = domTarget.toDataURL("image/png"); // 本行报错

报错信息如下：

Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’:
Tainted canvases may not be exported.

是说受污染的canvac不可以被导出(调用toDataURL())

解决

组件渲染代码：

// npm i qrcode.react
import Qrcode from "qrcode.react";// render:
<Qrcodevalue={this.state.value}renderAs={this.state.renderAs}size={this.state.size}bgColor={this.state.bgColor}fgColor={this.state.fgColor}level={this.state.level}includeMargin={this.state.includeMargin}// 二维码中心的图片(log)的设置imageSettings={{src: "https://img.alicdn.com/tfs/TB1qEwuzrj1gK0jSZFOXXc7GpXa-32-32.ico",width: 50, // 百分比height: 50,excavate: true,  // 中心是否为空心(被挖掘)}}
/>

当设置imageSettings的src为某个CDN地址时，因为跨域的原因，出现了上文的错误。

解决：
我把要用到的资源下载到本地，之后导入本项目中的资源：

import alipayIcon from "../../assets/img/alipay.ico";src: alipayIcon,

重新运行，二维码正常渲染。

Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvases may not be exported.相关推荐

Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported [已解决]...
原文链接: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported [已解 ...
Fabric.js Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvases may not be exported
Fabric.js Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported ...
头像裁剪和Uncaught DOMException: Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvases m
此文是半原创. 头像裁剪的主要实现是同事找来发我的,用着还不错. 记一下,可以用作以后研究. 此文主要记录一个要点: 当用户上传已上传头像,裁剪头像弹窗获取到图片,当调用canvas的toDataUR ...
Uncaught DOMException: Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvases may no
未捕获的DomeException:未能在"HTMLCanvaElement"上执行"toDataURL":可能无法导出受污染的画布.出现这个bug的原因可能有 ...
Uncaught SecurityError: Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvases may
一旦您将未经 CORS 批准从其他来源加载的任何数据绘制到画布中,画布就会被污染.受污染的画布不再被认为是安全的,任何从画布取回图像数据的尝试都将导致抛出异常. 在受污染的画布上调用以下任何一个都会导 ...
html2canvas 报错：Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement : Tainted canvases may not be ...
其实解决这个报错很简单,直接看下图: 把图中allowTaint改成false就好了哦!
视频截图Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvas处理
2021-10-14 背景系统环境报错原因报错截图处理过程最终结果背景因为工作需要,所以研究了一下vue-video-player.使用起来很方便,但是也遇到一个不小的坑,搞的我欲仙欲死 ...
@liveqing/liveplayer 视频截图Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvas处理
背景因为工作需要,所以研究了一下LivePlayer H5直播|点播播放器.使用起来很方便,但是也遇到一个不小的坑,搞的我欲仙欲死. 系统环境 windows10.vue2.6.@liveqing/ ...
使用canvas截图跨域导致的报错（Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement）
使用跨域图片绘制会污染canvas画布,导致无法导出canvas数据,转化成图片解决办法:通过设置crossOrigin来解决 let video = document.createElement( ...

Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvases may not be exported.

Intro

解决

Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvases may not be exported.相关推荐

最新文章

热门文章