所以我有以下代码：
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
好的，看看我的代码，在test 1我使用与我的页面托管在同一域中的图片创建一个图像对象。从A:我可以看到它加载得很好（A: and C:只是作为测试投入以确保 img 对象正确加载）。和B:也有效，它将图像绘制到我的画布上。
In test 2，我加载托管在与我的页面域不同的域中的图像。C:工作正常，我知道您可以加载其他域上托管的图像。然而，D:不起作用。我收到以下错误：
Error: uncaught exception: [Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)" location: ....
根据我的理解，这意味着这被视为跨站点脚本。
所以问题如下：
1）为什么这被认为是跨站点脚本？我的意思是，我知道why...但是为什么是D:不允许，当C:是？在我看来，它们在原则/精神上是一样的？
2）除了传统的跨站点脚本解决方法之外，还有其他方法可以解决这个问题吗？我想我必须使用 AJAX 将 URL 传递到服务器端脚本并发出请求，然后将图像保存在服务器上并向其返回 URL，以便它位于同一域中，或者否则（我认为）我可以返回原始的 Base64 编码数据并使用画布方法从原始数据构建它。我可以忍受做这些事情，但是......我有点希望我可能错过了一些关于 html5/canvas 的东西（我是新手！）
