在客户端独立 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 规范的人故意引入了这个错误,这非常烦人。