GIFTSHOT Cross Origin Issue

Published On: 25 November 2016.By Ajay Tak.

Digital Engineering

GIFTSHOT Cross Origin Issue

GIFSHOT

What is GIFSHOT?

Site – https://yahoo.github.io/gifshot/
Source Code :https://github.com/yahoo/gifshot

Gifshot is a javascript library that can create animated GIFs from media streams, videos, or images. The client-side nature of the library makes it extremely portable and easy to integrate into almost any website.

We used it in a webapp that we developed for one of the prime Telecom Operator, where user can capture/upload multiple photos and then can create an animated GIF with a predefined background template and can post on facebook. It was an webapp that’s compatible with all devices.

Gifshot is a great library that support all devices and almost all latest browsers. On above mentioned github link you can also find, how to use gifshot.

Issue

When user was capturing/uploading an image, we were drawing the image in canvas. At the time of creating GIF, we were using dataURL of image by getting it from canvas. Due to some security reason safari was throwing error.

Cross-origin image load denied by Cross-Origin Resource Sharing policy.

In other browser (latest version) it was working fine but few old version of other browsers also doesn’t support it.

After spending couple of hours, doing lot of research and struggling with cross origin policy, we found that crossOrigin was defined as anonymous. On line no 310 it was defined as follows: ‘crossOrigin’: ‘Anonymous’.

If setting is ‘crossOrigin’: ‘Anonymous’, you must have a server hosting images(Http url of image). But we were using dataURI that’s why safari was throwing error.

Resolution

To resolve it, kindly edit the gifshot library and set ‘crossOrigin’: ”.

If you face similar issue even whenyou are not using Gifshot then you could simply check the url string and if it starts with data: then it probably won’t be served with the cross origin header, then you can set the crossOrigin property null otherwise set Anonymous.

Code Snippet : –

var img = new Image,
   canvas = document.createElement("canvas"),
   ctx = canvas.getContext("2d"),
   src = "http://example.com/image"; // insert image url here

img.crossOrigin = "Anonymous";

var img = new Image,

canvas = document.createElement("canvas"),

ctx = canvas.getContext("2d"),

src = "http://example.com/image"; // insert image url here

img.crossOrigin = "Anonymous";

————————————————————————————————

var img = new Image,
   canvas = document.createElement("canvas"),
   ctx = canvas.getContext("2d"),
   src = "data:image/png base64, jhG&Y"; // insert image url here

img.crossOrigin = "";