RSS

Fixing Canvas Image Rendering Issues With Cross Origin Resource Sharing (CORS)

30 Nov

I was working on integrating photosphere library which will render 3d images to 3d image gallery. This library internally heavily uses Three.js 3d capable JavaScript library. Initially everything was working fine but when we access CORS enabled image domain canvas images were not rendered and no errors logged in console. Issue was library internally fetch ajax request to image source and there is no option to set “withCredentials”. I simply extended library to have this option enabled. But more importantly another issue was by default library was setting “crossorigin” attribute to “anonymous” in canvas image renderer.
Following is the code from

https://github.com/JeremyHeleine/Photo-Sphere-Viewer/blob/master/photo-sphere-viewer.js#L362.

// CORS when the panorama is not given as a base64 string
if (!this.config.panorama.match(/^data:image\/[a-z]+;base64/)) {
loader.setCrossOrigin('anonymous');
}

Again I extended library little bit to include this as an option in initialization configuration object. When setting this to appropriate setting fixed my issue. I will share forked library with my fixes. Actually this issue is worth noting as it might be more commonly encountered in image canvas processing libraries. Actually there is nothing wrong with these libraries but CORS used for images causing issues(depending on your requirement). Finding the cause of these issues might be tedious hence thought of sharing this in this blog post.

HTML specification now has a crossorigin attribute for resources that allows images defined by the element loaded from foreign origins to be used in canvas as if they were being loaded from the current origin(W3C Source : http://dev.w3.org/html5/spec-preview/urls.html#cors-enabled-fetch).

You can use CORS enabled images without cross origin heads but it will seal the canvas so that it will be unchangeable afterwards (which is known as “tainted canvas” for security reasons such as users from having private data exposed by using images to pull information from remote web sites without permission.)
So in summary CORS enabled images can be reused since it will prevent tainting as described above.

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

img.crossOrigin = "use-credentials"; // or anonymous (which is what this post is
// focused on)

img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage( img, 0, 0 );
}
img.src = src;

Advertisements
 
Leave a comment

Posted by on November 30, 2015 in ASP.NET

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: