时间戳

首页 > 解决方案 > 使用 Reactjs 在画布上绘制图像后无法将画布转换为图像

javascript - 使用 Reactjs 在画布上绘制图像后无法将画布转换为图像

问题描述

我正在尝试在画布上绘制图像并使用我的反应应用程序将其转换为图像，但是当我单击下载按钮时出现此错误

`未能在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。`

这是我的代码 绘制图像功能

const printLocation = _ => {
    let canvas = canvasRef.current;
    let context = canvas.getContext("2d");
    let img = new Image();
    img.src = "https://kilausenja.com/wp-content/uploads/2019/04/18-02-08-17-29-50-859_deco.jpg";
    context.drawImage(img, 0, 0, 100, 100);
  };

将画布转换为图像功能

  const canvasToImg = _ => {
    let canvas = canvasRef.current;
    let tagA = document.createElement("a");
    document.body.appendChild(tagA);
    tagA.href = canvas.toDataURL();
    tagA.download = "canvas-image.png";
    tagA.click();
    document.body.removeChild(tagA);
  };

这是我的代码框示例

标签： javascriptreactjscanvashtml5-canvas

解决方案

伙计，我克隆你的沙箱并对函数 printLocation 进行一些更改

编辑版本

  img.crossOrigin = "anonymous";
  img.src = "https://2.bp.blogspot.com/-VTIlinKHDHE/WXiij8jFF-I/AAAAAAAADvs/r2yZ6H6QomUfR_kNBW0F-638aCj98XZvACLcBGAs/s1600/hasil%2Bscan%2B1%2B-%2Bcara%2Bscan%2Btanda%2Btangan.jpg";

记住图像的来源，因为没有任何服务器允许您发出跨源请求

推荐阅读