However, Reading Cross-origin Images Is Blocked (
I've seen this question a few times, so idea I'd embrace the topic here.
The issue is that you are using Cloth JS and all seems fine. Then y'all try to run a function like toDataUrl to salve the sail to an prototype, and the browser won't allow information technology. You will see in the console an mistake that says something to the effect that theCanvas is Tainted. The root of the event is that you have an epitome on the canvas that was loaded cross-origin. This violates security polices put in place by web browsers and thus you end up with a tainted sheet. The good news is information technology's possible to handle this – read on.
Contents
- 1 The Cloth JS Library
- 2 What is Tainting the Canvas?
- two.one What is Cross-Origin Content
- iii How to Not Taint a Canvas with Cantankerous-Origin Content
- 3.1 Setting the access-control-allow-origin Header
- 3.two Load Images with crossOrigin set up to Anonymous
The Fabric JS Library
The consequence is highlighted in this bug written report. And if you read through the unabridged thread there, you will see that it appears the issue has been resolved as of version i.iv.0 (November 2013).
So if the issue has been fixed, why am I posting this? Well, if yous are like me (and y'all might be since y'all're reading this) you lot are using an older version of Fabric JS for one reason or another. And for me, I practise not desire to upgrade my version of Fabric JS at this time for reasons that aren't important.
So this mail is how to cope with the problem if you also want to go on your Cloth JS library as is.
What is Tainting the Canvas?
https://github.com/kangax/fabric.js/issues/263
What is Cross-Origin Content
I won't go into all the details because this is documented elsewhere on the cyberspace, just just put cross-origin ways that the content was loaded from another domain. And so if your website is responding at:
and your images are loading from Any of the following variations:
https://world wide web.example.com/
https://instance.com/
http://www.example.u.s.a./
https://www.example.united states/
https://github.com/kangax/textile.js/issues/263
https://github.com/kangax/fabric.js/issues/263
How to Not Taint a Canvas with Cross-Origin Content
Cross-origin content can be used in a canvass, even with Fabric JS, still you demand to ensure two conditions are loaded correctly:
- The content loaded cantankerous-origin needs to have theaccess-control-allow-origin header set when information technology is sent back to the browser.
- When loading the image to the browser, information technology needs to have thecrossOrigin attribute gear up toAnonymous prior to loading it to the browser.
Theaccess-command-permit-origin header is set up on the server that is sending the image cross-origin to the browser (canvas). If you lot operate this server, you will need to set up this value. If you do non operate this server, and so you are at the mercy of the server and if they have set this value for you already.
This header can comprise ii values:
- A domain (origin) that is allowed to request content from this server cross-domain.
- A* (wildcard) which means that any domain (origin) is allowed to asking content cantankerous-domain.
Y'all can read more nearly this header and how to apply information technology from Mozilla.
Load Images with crossOrigin fix to Anonymous
Now that you have content being sent to your browser that is allowed cross-origin, it'southward time to load it appropriately to the canvas with Material JS.
The all-time method for those of you using the newer versions of Fabric JS (subsequently the above mentioned fix was implemented) would be to use thefromUrl method of Material JS.
| /* Ascertain prototype URL */ var crossOriginImageUrl = "https://world wide web.instance.com/this-epitome.jpg" ; /* Add together image to canvas */ var newImage = fabric . Image . fromURL ( crossOriginImageUrl , function ( crossOriginImage ) { crossOriginImage . set up ( { width : '100px' , height : '100px' , superlative : '20px' , left : '20px' } ) } ) ; |
With this method, you feed the URL into Textile JS and information technology handles the rest.
Nonetheless, if you lot are using an older version of Fabric JS you lot demand to slightly change this. You kickoff need to create the epitome in the browser, then add together that image to the canvas via Fabric JS using theEpitome method. Notation the cardinal to what his happening here though, earlier we call the onload method on the new image element we are setting the crossOrigin attribute toBearding, which is what allows the browser and the canvas to take the cross-origin image.
| /* Create image object */ var crossOriginImageObj = new Paradigm ( ) ; crossOriginImageObj . crossOrigin = "Anonymous" ; crossOriginImageObj . src = "https://www.example.com/this-epitome.jpg" ; crossOriginImageObj . onerror = function ( ) { console . log ( "cantankerous-origin image load fault" ) ; } crossOriginImageObj . onload = part ( ) { /* Add image to canvas */ var crossOriginImage = new textile . Image ( crossOriginImageObj , { crossOriginImage . set up ( { width : '100px' , height : '100px' , top : '20px' , left : '20px' } ) ; } |
I should bespeak out that these two methods are actually identical in the procedure in what that are doing, information technology's but a thing of if you are doing the extra endeavor or the library is doing the actress endeavour.
I hope this helps to articulate up some confusion and frustrations for some other developers. Cantankerous-origin problems are frustrating when you lot are stuck, but at the root of them they aren't all that complicated typically. It's only a affair of agreement what is happening and then setting the few flags that are required to make the net talk across origins correctly.
Source: https://promincproductions.com/blog/fabric-js-cross-origin-images-taint-canvas/
Post a Comment for "However, Reading Cross-origin Images Is Blocked ("