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

2022-01-15 00:00:00 cors canvas javascript html todataurl

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

In a client-side standalone JS application, I'm trying to make it so I can call toDataURL() on a canvas on which I've drawn some images specified by a URL. Ie I can input into a textbox the url to any image (hosted on, say, imgur) that I want to draw on the canvas, click a "draw" button and it will draw on the canvas. The end user should be able to save their final render as a single image, for this I'm using toDataURL().

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

Anyway, until they actually fix that annoying "operation is insecure" error (gee, you're going to tell the end user what they can and can't do with their own data?) I followed a workaround that said to add the image to the DOM and set its crossOrigin property to "Anonmyous" and then draw it to the canvas.

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

Here's a full working simplified version of my code (but in reality there will be many more features):

<!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 并点击画，它会工作.但是，一旦我添加了那条线，整个东西就坏了，甚至根本不会被绘制到画布上.

Without the img.crossOrigin = "Anonymous"; line, I could input http://i.imgur.com/c2wRzfD.jpg into the textbox and click draw and it would work. However as soon as I added that line, the whole thing broke and it won't even be drawn to the canvas at all.

我需要改变什么来解决这个问题?我真的需要能够为最终用户实现保存最终图像的功能，而编写 html5 规范的人故意引入了这个 bug，这非常烦人.

What do I need to change to fix this? I really need to be able to implement the functionality for the end user to save their final image and it's extremely annoying that the people who wrote the html5 spec purposely introduced this bug.

推荐答案

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

You must set the CORS request before the src - just swap the lines into:

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

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

You will also need to add an onload handler to the image as loading is asynchronous:

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;

相关文章