Support for loading images with a url (CORS)

[nikse]

I need support for images to work w/ darkroom via url's. Fabric already has this built in and I hacked together a poor solution over the current release branch using fabric.Image.fromURL. Can you get this added as an option to v2 where it determines if it should load the image via url or new fabric.Image to avoid any CORS issues when trying to upload images to darkroom that are not local images

[brenley]

Was there a response to this? I am facing the same issue (scenario where images are hosted on external cdn) and wondering if there are plans to support this.

[nikse]

Not that I know of. I ended up doing a half working hack on a custom pull of the code (not the best way, but i needed something to work). Would still love it if the support for this was increased

[MattKetmo]

Hello. I'm not sure to understand the issue here. Do you have an example to reproduce or maybe you'd like to submit a PR with the "hack"?

[nikse]

The issue is that when using a url as the source of your photo a CORS exception is sometimes thrown when applying the image to the canvas using toDataURL which will break the cropper. The fix that I tried to apply was to use the fabric Image.fromURL function along with passing in the parameter this.image.crossOrigin = 'Anonymous'; when using the function. Unfortunately this is only partially working and will still hit the CORS issue if the website where the image lives has it enabled. I think the underlying problem is that somewhere in the code the image is still trying to applied to the canvas using toDataURL

[bjarkebm]

Is the solution to simply add crossOrigin: 'anonymous' when the sourceImage is initialized?

_initializeImage: function() {
    this.sourceImage = new fabric.Image(this.originalImageElement, {
      crossOrigin: 'anonymous',
      ....
    });

(see http://fabricjs.com/docs/fabric.Image.html#crossOrigin)

Alternatively, the crossOrigin property should be set on the original image element, (<img crossorigin="anonymous" ... />) and then be propagated whenever there's a call to new Image() inside darkroom.

Are there any problems with setting the crossOrigin property when the image is in fact not cross-origin?