使用img在画布上绘制图像。crossOrigin=“Anonymous”不起作用
在客户端独立的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=“匿名”
行，我可以输入http://i.imgur.com/c2wRzfD.jpg进入文本框，单击draw，它就会工作。然而，我一加上那条线，整个事情就破裂了，它甚至不会被画到画布上。
我需要更改什么来修复这个问题？我真的需要能够为最终用户实现功能以保存他们的最终图像，并且编写html5规范的人故意引入了这个错误，这非常烦人。
共有2个答案
当服务器需要授权才能访问图像时，该值应为：
img.crossOrigin = "Use-Credentials";
否则浏览器将在收到HTTP 401后放弃。
您必须在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;
-
因此，我正在创建一个cordova应用程序，在该应用程序中，我从iphone库中拍摄一张照片，将其绘制到画布上，并向其添加另一张图像，以便将其保存为一张照片。到目前为止，我从iphone照片库中绘制的照片可以毫无问题地绘制到画布上，但是第二张图片没有。 当我加载第二张图像时，它首先被添加到具有绝对定位的div中，以便将其移动到我想要的任何位置。之后，我得到了实际的图像，它的来源和位置，并尝试将其绘
-
我有以下代码应该在图像中绘制线条。我的代码是： 如果我编写，它实际上可以工作。但是我的数组很长并且来自一个输入。
-
在画布上画画是非常好的。即使橡皮擦也能工作得很好。问题是当画布保存为图像时，它画的是黑线，而不是橡皮擦。 为了更好地理解，我添加了屏幕、镜头和代码。 1.在擦除图的同时- 我不明白为什么橡皮移动被替换为黑色，而保存画布作为一个图像。
-
实际上，我可以使用函数来完成。我从“HTML5画布-如何在图像背景上画一条线？”中得到的东西。但是我需要在不使用from函数的情况下绘制图像，如下所示：
-
请帮助我在Android SDK上实现同样的结果。