CORS issue when using fabric.fromUrl

Question

I am integrating fabricjs with angularjs application. I am pulling an image from a third party source (which is not in my control). I wish to perform some actions on it like: filtering, adding to canvas, storing to canvas and reloading from canvas.

I am using fabric fromurl call with crossorigin but it fails everytime.

 fabric.Image.fromURL('http://img.fkcdn.com/image/dining-chair/b/g/y/fidcbennywncsach-1-cedar-pine-devdar-home-cherry-white-original-imae9fsfbkxrgebt.jpeg', function (img) {
    canvas1.add(img.set({
        left: 50,
        top: 50,
        angle: 30
    }));
    console.log('CORS enabled + crossOrigin property - DataURL: ', canvas1.toDataURL());
}, {
    crossOrigin: 'Anonymous'
});

Fiddle

Is there anything I am doing wrong?

Answer 1

crossOrigin will only request permission to use the resource over CORS but the server can deny it, which in case will also make loading the image fail all together.

The only way around is to upload the image to your own server (no crossOrigin needed) or to use a CORS proxy ( crossOrigin still needed) or to upload the image to a host that allows CORS usage (imgur.com and dropbox.com being a couple of examples). All these workaround may involve user right issues.

Answer 2

Fabricjs Code Snippet

 fabric.util.loadImage(img.src, function(any image url on website) {
    var object = new fabric.Image(any image url on website);
    object.set({
      id: 'bg',
      width: 100,
      height: 100,
      left: 20,
      top: 30
    });
    canvas.add(object);

  }, null, {
    crossOrigin: 'anonymous'
  })

To Avoid Cors Issue in fabricjs

1 : Use fabric.util.loadImage Instead of fabric.Image.fromURL

2 : fabric.util.loadImage Takes 3 arguments and 3rd arg should be crossOrigin: 'anonymous' like in below code

3 : If you are showing image in html use crossOrigin = 'anonymous' in image tag in html

4 : there will be cors error if you website is unsecure and you want to pull image from secure website

eg : https Vs http

• you are on localhost:7000 (unsecure) and want to pull image from https://hello.com/image2.png (secure)

• you are on http://www.hiee.com and want to pull image from https://hello.com/image2.png (secure)

5 : if you still have cors issue then the server from which you are pulling image should also send these headers with image "Access-Control-Allow-Origin", "*" .Well how to checkout these headers , is open image in browser tab then firebug->network , see headers

6 : enable / disable web security in browser like

Note : This will be temporary solution that's suitable for only local environment , but as you access same url from browser in other network , CORS issue will appear again.

Answer 3

Try this:

 fabric.Image.fromURL('http://img.fkcdn.com/image/dining-chair/b/g/y/fidcbennywncsach-1-cedar-pine-devdar-home-cherry-white-original-imae9fsfbkxrgebt.jpeg', function (img) {
canvas1.add(img.set({
    left: 50,
    top: 50,
    angle: 30
}));
console.log('CORS enabled + crossOrigin property - DataURL: ', canvas1.toDataURL());}, null,{
crossOrigin: 'Anonymous'});

Fiddle