使用img.crossOrigin =“匿名”将图像绘制到画布不工作 [英] Drawing images to canvas with img.crossOrigin = "Anonymous" doesn't work
问题描述
在客户端独立的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().
无论如何，直到他们实际修复了恼人的操作是不安全的错误（g，你要告诉最终用户他们可以和不能用自己的数据？）我遵循一个解决方法说，将图像添加到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.
推荐答案
您必须先在CORC之前设置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;
这篇关于使用img.crossOrigin =“匿名”将图像绘制到画布不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
