2

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?

ankurjhawar
  • 185
  • 1
  • 3
  • 12

3 Answers3

4

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.

  • 1
    I had to download the images to my server to avoid CORS. +1 for highlighting "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 altogether". – ankurjhawar May 06 '16 at 08:31
  • is it possible to render image from aws s3 bucket on canvas? if yes then please let me know how? – Umesh Patadiya Dec 22 '18 at 14:01
  • 4
    Is 'Anonymous' value is case sensitive ? – mayur kukadiya Dec 26 '18 at 03:34
4

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.

Community
  • 1
  • 1
vijay
  • 7,715
  • 8
  • 49
  • 69
  • Hi @vijay: I have same issue even though i also applied crossOrigin: 'Anonymous'. Still i am facing the same error as: Access to image at 'localhost:9000/assets/images/image.png' from origin 'localhost:9001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Ref: https://jsfiddle.net/jasie/r3fqu4p6/35/ I have also tried with `fabric.util.loadImage`, but that is also not working. – TMA Mar 06 '20 at 11:20
  • 1
    @aananddham solution 1 : EITHER on server allow cors from 9001. 2 : OR totally disable cors on server and accept traffic from any origin's. in nodejs i would use like this https://expressjs.com/en/resources/middleware/cors.html – vijay Mar 06 '20 at 11:39
  • Hi @vijay: thank you for your super fast reply. I have already applied these settings on my server file ***app.js*** `this.app.use((req, res, next) => { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Expose-Headers", "x-total-count"); res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,PATCH"); res.header("Access-Control-Allow-Headers", "Content-Type,authorization"); next(); });` – TMA Mar 06 '20 at 12:00
2

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

nilay jha
  • 696
  • 8
  • 12