Question

在客户端独立的JS应用程序中，我试图制作它，以便我可以在画布上调用toDataURL（），我在其上绘制了由URL指定的一些图像。即我可以在文本框中输入我要在画布上绘制的任何图像（托管在，例如，imgur）上的URL，单击＆＃34;绘制＆＃34;按钮，它将在画布上绘制。最终用户应该能够将他们的最终渲染保存为单个图像，为此我使用toDataURL（）。

无论如何，直到他们真正解决这个令人讨厌的问题并且＃34;操作是不安全的＆＃34;错误（哎呀，你要告诉最终用户他们可以做什么，可以做他们自己的数据？）我遵循了一个解决方法，即将图像添加到DOM并将其crossOrigin属性设置为＆＃34; Anonmyous＆＃34;然后将其绘制到画布上。

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

<!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规范的人故意引入了这个bug，这非常令人讨厌。

Answer 1

你必须在 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;

Answer 2

当服务器需要授权访问图像时，值应为：

img.crossOrigin = "Use-Credentials";

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

使用img.crossOrigin =＆＃34; Anonymous＆＃34;将图像绘制到画布上不起作用

2 个答案: