javascript html5 drawImage与来自不同域的图像

因此，我有以下代码：

var element = document.getElementById("myCanvas");
var width = element.width;                                   
var height = element.height;  
var context = element.getContext("2d");                      

/* test 1 */
var img1 = new Image(width, height);
img1.src = "http://www.mydomain.com/image.jpg";

document.body.appendChild(img1);          // <-- A: this works 
context.drawImage(img1,0,0,width,height); // <-- B: this works

/* test 2 */
var img2 = new Image(width, height);
img2.src = "http://www.notmydomain.com/image.jpg";

document.body.appendChild(img2);          // <-- C: this works 
context.drawImage(img2,0,0,width,height); // <-- D: this does not work

var-element=document.getElementById（“myCanvas”）；
var-width=element.width；
变量高度=元素高度；
var context=element.getContext（“2d”）；
/*测试1*/
var img1=新图像（宽度、高度）；
img1.src=”http://www.mydomain.com/image.jpg";
document.body.appendChild（img1）；// 这是一种防止信息“被盗”的安全措施。这与不能使用AJAX从另一个域获取页面的原因相同

例如，假设银行网站使用图像显示信用信息。您的代码可以将该图像加载到页面中，然后将其发送到服务器，从而窃取客户端的安全信息。这是一个极端的例子，但也是一个有效的例子

您可以将图像附加到页面，因为您无法从中获取任何信息。您无法将图像加载到javascript中，因为这样您就可以使用原始图像数据进行操作和传输。
按住它。这里还有别的事情

您完全可以从不同的域绘制图像

下面是JSFIDLE上的代码从placekitten.com绘制图像：


您应该尝试用notyourdomain映像的url替换该fiddle代码中的url。它应该仍然有效

通常，您应该始终能够从能够成功获取图像的任何位置将图像绘制到画布上

在此之后，您不允许执行的操作是获取
imageData
或使用
toDataUrl
将画布保存到PNG。这是不允许的重要原因

我猜你是在做一些违反安全规则的事情，而不仅仅是试图画图。
aha！你说得对，先生。在进一步探究之后，我发现抛出错误的不是
.drawImage（）
，而是我后来对
.getImageData（）
的调用！好的，这更有意义，更符合
A:
和
C:
的内容。+1，感谢您的回复！是的，我知道整个xss的歌曲和舞蹈，但我不能做我在帖子中展示的事情是没有意义的，事实证明你可以做到，因为这与
.appendChild（）
的原理相同；脚本实际上在更深层次上失败了（参见Simon Sarris的回应）