javascript html5 drawImage与来自不同域的图像 [英] javascript html5 drawImage with image from a different domain
问题描述
所以我有以下代码：
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
好吧，看看我的代码， code> test 1 我创建一个图像对象，其图片托管在与我的页面相同的域上。从 A：我可以看到它加载正常（ A：和 C： / code>只是作为测试抛出，以确保img对象加载正确）。和 B：也工作，它绘制图像到我的画布。
Okay so looking at my code, in test 1 I create an image object with a picture that is hosted on the same domain as my page. From A: I can see that it is loaded fine (A: and C: are just thrown in as tests to make sure img object loaded proper). And B: works as well, it draws the image to my canvas.
在测试2 中，我加载的托管在与我的页面域不同的域上的图片。 C：运行正常，我知道您可以加载托管在其他域上的图片。但是， D：不起作用。我收到以下错误：
In test 2, I load an image that is hosted on a domain that is different from the my page's domain. C: works fine, and I know you are allowed to load images hosted on other domains. However, D: does not work. I get the following error:
错误：未捕获异常：[异常...安全错误代码：1000nsresult：0x805303e8 （NS_ERROR_DOM_SECURITY_ERR）location：....
根据我的理解，这被视为跨站点脚本。
Which from my understanding means this is counted as cross-site scripting.
这里有一些问题：
1）为什么会考虑跨站点脚本？我的意思是，我知道为什么 ...但为什么 D：不允许，当 C：是？ IMO他们在原则/精神上是同样的事情吗？
1) Why is this considered cross-site scripting? I mean, I know why...but why is D: not allowed, when C: is? IMO they are sort of the same thing in principle/spirit?
2）有没有办法解决这个问题，除了传统的跨站点脚本解决方法？我想我必须使用AJAX将URL传递到服务器端脚本并提出请求，然后将图像保存在服务器上，并返回一个URL到它在同一个域，或者else（我认为）我可以返回原始base64编码数据，并使用canvas方法从原始数据构建它。我可以生活在做这些事情，但...我希望也许我缺少一些关于html5 / canvas东西（我是新的！）
2) Is there a way to get around this, other than traditional cross-site scripting workarounds? I think I'm going to have to use AJAX to pass the URL to a server-side script and make the request and then either save the image on the server and return a URL to it so that it is on the same domain, or else (I think) I can return the raw base64 encoded data and use the canvas methods to build it from the raw data. I can live with doing either of these things but...I'm sort of hoping maybe I'm missing something about html5/canvas stuff (I'm new to it!)
推荐答案
握住它。
这里的代码在这里是正在进行的。
You can absolutely draw images from a different domain.
jsfiddle从placekitten.com绘制图片：
Here's code at jsfiddle drawing an image from placekitten.com:
您应该尝试将该小提琴代码中的网址替换为notyourdomain图片的网址。它仍然可以工作。
You should try replacing the url in that fiddle code with the url of the notyourdomain image. It should still work.
一般来说，你应该总是能够从任何地方将图像绘制到画布上，以便能够成功从中获取。
In general you should always be able to draw images onto a canvas from anywhere that you're able to fetch them successfully from.
在这之后你不允许做的是获取 imageData 或将画布保存到PNG， code> toDataUrl 。有重要的安全原因为什么不允许。
What you're not allowed to do, after that point, is get the imageData or save the canvas to a PNG with toDataUrl. There are important security reasons why that's not allowed.
我的猜测是，你正在做一些违反安全规则的事情，而不仅仅是试图绘制图像。
My guess is that you're doing something to violate one of the security rules and not just trying to draw the image.
这篇关于javascript html5 drawImage与来自不同域的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
