idraw icon indicating copy to clipboard operation
idraw copied to clipboard

网络图片问题

Open 605666069 opened this issue 1 year ago • 6 comments

您好,在使用您的 exportDataURL 的时候,如果里面的image src 为网络图片,会报错 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

605666069 avatar Oct 18 '22 12:10 605666069

我看文档里写的 src 可以是图片链接或图片Base64,请问这个怎么处理

605666069 avatar Oct 18 '22 12:10 605666069

@605666069 您好,请问方便提供一下问题的最小还原场景的demo代码吗?

chenshenhai avatar Oct 18 '22 12:10 chenshenhai

image @chenshenhai 我在咱们官方demo里面试的也是直接报错

605666069 avatar Oct 18 '22 12:10 605666069

好的,我需要花点时间检查一下

chenshenhai avatar Oct 18 '22 13:10 chenshenhai

如果解决了请快点告诉我,感谢

605666069 avatar Oct 18 '22 13:10 605666069

能否支持下给img标签设置crossOrigin = "anonymous"? 下面代码就不报这个错误

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="400"></canvas>
  </body>

  <script>
    const canvas = document.getElementById("canvas");
    const cxt = canvas.getContext("2d");
    const img = new Image();
    img.src =
      "https://ossjuaiceshi.oss-cn-beijing.aliyuncs.com/products/main/images/43bf9d9a-8fa1-4652-952c-e9fda45900bd.png";
    img.crossOrigin = "anonymous";
    img.onload = function () {
      cxt.drawImage(img, 10, 0);
      const base64 = canvas.toDataURL("image/png");
      console.log(base64, 22);
    };
    console.log(canvas, 11);
  </script>
</html>

dongmenghao avatar Oct 19 '22 06:10 dongmenghao

@605666069 已处理,升级到0.3.0-alpha.4版本

chenshenhai avatar Oct 22 '22 12:10 chenshenhai