使用 img.crossOrigin = "Anonymous" 将图像绘制到画布上不起作用

新手上路,请多包涵

在客户端独立的 JS 应用程序中,我试图做到这一点,以便我可以在画布上调用 toDataURL(),我在画布上绘制了一些由 URL 指定的图像。即我可以在文本框中输入我想在画布上绘制的任何图像(托管在 imgur 上)的 url,单击“绘制”按钮,它就会在画布上绘制。最终用户应该能够将他们的最终渲染保存为单个图像,为此我正在使用 toDataURL()。

无论如何,直到他们真正修复那个恼人的“操作不安全”错误(哎呀,你要告诉最终用户他们可以用自己的数据做什么,不能做什么?)我遵循了一个解决方法,说添加图像到 DOM 并将其 crossOrigin 属性设置为“Anonmyous”,然后将其绘制到画布上。

这是我的代码的完整工作简化版本(但实际上会有更多功能):

 <!DOCTYPE html5>
<html>
<head>
<style>
#canvas {border:10px solid green;background-color:black;}
#imgbox {border:2px solid black;}
</style>
</head>
<body>
<canvas id="canvas" width=336 height=336></canvas>
<br><br>
<input size=60 id="imgbox">
<input type="submit" value="Draw" onclick=draw()>
<script>
function draw() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var img = new Image();
    img.src = document.getElementById("imgbox").value;
    img.crossOrigin = "Anonymous";
    context.drawImage(img, 40, 40);
}
</script>
</body>
</html>

如果没有 img.crossOrigin = "Anonymous"; 行,我可以将 http://i.imgur.com/c2wRzfD.jpg 输入到文本框中,然后单击绘图,它就可以工作了。然而,一旦我添加了那条线,整个事情就崩溃了,它甚至根本不会被绘制到画布上。

我需要更改什么才能解决此问题?我真的需要能够为最终用户实现保存他们最终图像的功能,编写 html5 规范的人故意引入这个错误非常烦人。

原文由 Joey 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.7k
2 个回答

您必须在 src 之前 设置 CORS 请求 - 只需将这些行换成:

 img.crossOrigin = "Anonymous";
img.src = document.getElementById("imgbox").value;

您还需要向图像添加一个 onload 处理程序,因为加载是异步的:

 img.onload = function() {
    context.drawImage(this, 40, 40);
    // call next step in your code here, f.ex: nextStep();
};
img.crossOrigin = "Anonymous";
img.src = document.getElementById("imgbox").value;

原文由 user1693593 发布,翻译遵循 CC BY-SA 3.0 许可协议

当服务器需要授权访问图像时,值应该是:

 img.crossOrigin = "Use-Credentials";

否则浏览器会在收到 HTTP 401 后放弃。

原文由 Dzmitry 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题