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

水深无声 2023-01-01 07:58 342阅读 0赞

Intro

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

当执行以下API时，报错：

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

报错信息如下：
在这里插入图片描述

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

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

解决

组件渲染代码：

  1. // npm i qrcode.react
  2. import Qrcode from "qrcode.react";
  4. // render:
  5. <Qrcode
  6.   value={ this.state.value}
  7.   renderAs={ this.state.renderAs}
  8.   size={ this.state.size}
  9.   bgColor={ this.state.bgColor}
  10.   fgColor={ this.state.fgColor}
  11.   level={ this.state.level}
  12.   includeMargin={ this.state.includeMargin}
  13.   // 二维码中心的图片(log)的设置
  14.   imageSettings={ { 
  15.     src: "https://img.alicdn.com/tfs/TB1qEwuzrj1gK0jSZFOXXc7GpXa-32-32.ico",
  16.     width: 50, // 百分比
  17.     height: 50,
  18.     excavate: true,  // 中心是否为空心(被挖掘)
  19.   }}
  20. />

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

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

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

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

发表评论

表情：
评论列表 （有 0 条评论，342人围观）

还没有评论，来说两句吧...

相关阅读