柒书
博客
工具
收藏
游戏
博客
工具
收藏
游戏

canvas 相关

问题 1

使用canvas下载图片报错Uncaught DOMException: Failed to execute 'toDataURL' ...

  • 完整报错信息
quarkunlimit_qu-mobx.js?v=28efd6c7:777 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

问题原因：加载的图片存在跨域问题，需要进行跨域相关设置，代码如下：

const img = new Image();
// 核心步骤，最好在设置src前进行，否则部分浏览器可能会报错
img.setAttribute("crossOrigin", "Anonymous");
img.src = `${getWebUrl()}${this.generateUrl}`;
img.onload = () => {
  ctx.clearRect(0, 0, width, height);
  ctx.drawImage(img, 0, 0, width, height);
  this.generateFlag = true;
};

设置完成后，该问题解决了，新的问题出现了，报错信息如下：

Not allowed to navigate top frame to data URL: data...

问题原因：使用a标签伪装用户点击进行下载时需要给a标签设置innerHTML，代码如下：

const a = document.createElement("a");
a.href = canvas.toDataURL("image/png");
a.innerHTML = "Download File";
a.download = "preview.png";
a.click();

问题 2

Visual Studio Code中没有Canvas元素相关的语法提示

解决方案：在获取canvas dom前一行添加注释/** @type {HTMLCanvasElement} */ ，告诉Visual Studio Code 下面是一个canvas元素，随后canvas和ctx都将拥有语法提示

/** @type {HTMLCanvasElement} */
const canvas = canvasRef.current;
// react语法，原生js同理
const ctx = canvas.getContext("2d");