javascript - Cross-origin image load denied by Cross-Origin Resource Sharing policy - Stack Overflow

admin管理员组

文章数量:1410697

I use html2canvas (from html2canvas.hertzen) to capture screenshot. I got this strange error like this: The code of my webpage is put on one host, say Host A. If my webpage contains an image on another host, say Host B, then I hit this error: Cross-origin image load denied by Cross-Origin Resource Sharing policy

However, the confusing part is that if Host B is facebook (my image is a direct link to facebook .jpg) then the error disappear.

My function

html2canvas([document.body], {
                    useCORS : true,
                    logging : true,
                    onrendered : function(canvas) {
                        document.body.appendChild(canvas);
                        var myImage = canvas.toDataURL("image/png");
                        window.open(myImage);
                    }

Anyone got a tip? Tks

solution

 html2canvas([document.body], {
                                    useCORS: true,
                                    proxy: "Server",
                                    onrendered : function(canvas) {                               
                                        ListUCapture = canvas.toDataURL("image/png");                                                           
                                    }
                     });
Server is server of node.js

I use html2canvas (from html2canvas.hertzen.) to capture screenshot. I got this strange error like this: The code of my webpage is put on one host, say Host A. If my webpage contains an image on another host, say Host B, then I hit this error: Cross-origin image load denied by Cross-Origin Resource Sharing policy

However, the confusing part is that if Host B is facebook (my image is a direct link to facebook https://fbcdn-profile-a.akamaihd/hprofile-ak-ash4/372701_100000684388457_1551561655_q.jpg) then the error disappear.

My function

html2canvas([document.body], {
                    useCORS : true,
                    logging : true,
                    onrendered : function(canvas) {
                        document.body.appendChild(canvas);
                        var myImage = canvas.toDataURL("image/png");
                        window.open(myImage);
                    }

Anyone got a tip? Tks

solution

 html2canvas([document.body], {
                                    useCORS: true,
                                    proxy: "Server",
                                    onrendered : function(canvas) {                               
                                        ListUCapture = canvas.toDataURL("image/png");                                                           
                                    }
                     });
Server is server of node.js

• javascript
• google-maps
• html2canvas

Share Improve this question Follow edited Jul 8, 2014 at 11:31 HoangHieu asked Aug 1, 2013 at 9:50 HoangHieuHoangHieu 2,84033 gold badges3232 silver badges4646 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

If you wish to load cross-origin images to a canvas, you need to either serve the image with cross-origin headers or under the same origin. That image under Facebook is served with the following header option set:

Access-Control-Allow-Origin:*

Meaning, it can be cross-origin loaded with the useCORS option. However, it would appear that your Host B isn't serving them with cross-origin headers set.

本文标签： javascriptCrossorigin image load denied by CrossOrigin Resource Sharing policyStack Overflow