在客户端独立的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规范的人故意引入此错误是非常令人讨厌的。
您必须在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;
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句