To get around this using fabric js, Here I am sharing mainly three ways.

Set crossOrigin to anonymous

You will have to set a flag CrossOrigin in fabric that tells it to allow images from unknown origin. Setting this is easy.

fabric.Image.fromURL( URL,

function (img) {

canvas.add(img);

canvas.renderAll();

},{ crossOrigin: 'anonymous', ... }

);

Use fabric.util.loadImage

You don’t need to set crossOrigin, when using loadImage, this method handle CORS implicitly.

fabric.util.loadImage(URL,

function (img) {

var fab_image = new fabric.Image(img);

canvas.add(fab_image);

canvas.renderAll();

},{left:0, top:0, ... });

});

Use Proxy Image loading

This means always render image from same domain you are on.

For that I have created a Django view, that will read image from cross domain, write it on a temp file, and response with image data.

You can adopt the same approach with rails, php, java .. as well.

import requests

import tempfile

from django.http.response import HttpResponse def proxy_image(request):

image = requests.get(request.GET['url'], stream=True)



# Was the request OK?

if image.status_code != requests.codes.ok:

return ""



# Create a temporary file

lf = tempfile.NamedTemporaryFile()



# Read the streamed image in sections

for block in image.iter_content(1024 * 8):

# If no more file then stop

if not block:

break



# Write image block to temporary file

lf.write(block)

lf.seek(0)

image_data = lf.read()

lf.close()



return HttpResponse(image_data, content_type="image/jpg")

Now the image URL will look something like

GET: http://yourdomain.com/proxy_image?url=<Cross domain image url>

var URL = 'http://yourdomain.com/proxy_image?url=http://crossdomain.com/image.jpg'; fabric.Image.fromURL( URL,

function (img) {

canvas.add(img);

canvas.renderAll();

},{}

);