html5 Image Filters with Canvas

Question

I have download the source from this http://www.storminthecastle.com/projects/imagefilters1/. It is regarding some image manipulation in html5 canvas.

Inside the source, it will load the image located in a local directory...

function reset() {
    imageURL = "./sandbox.jpg";
    imageFilter = grayscale;
    document.querySelector("#filename").innerHTML = "";
    update();
  }

The above is working in my project. But I am trying to load an image from an url, so I modified it to the following...

function reset() {
    imageURL = "http://xxxxxx.jpg";
    imageFilter = grayscale;
    document.querySelector("#filename").innerHTML = "";
    update();
  }

When I test it, the image is being displayed correctly. However, all the features are not working anymore and I don't know why. I have no idea why it cannot take in url as the argument and I don't know how to modify it to make it work. Any helps?

possible duplicate of [Browser Canvas CORS Support for Cross Domain Loaded Image Manipulation](http://stackoverflow.com/questions/7129178/browser-canvas-cors-support-for-cross-domain-loaded-image-manipulation). If image is loaded triggering CORS you can only display the image but not alter, set or get pixels from it which is necessary with some filters. — , Sep 27 '13 at 20:42
When you are loading an image from another source, you have to draw the image into the canvas first, then change pixels, apply filters.. there's an Extension for Chrome named [Lomo+](https://chrome.google.com/webstore/detail/lomo+/mihmjgdafbdggpgjfaeinppnlnpgelnj?hl=en) you should see its source — Adam Azad, Sep 27 '13 at 20:50
Hi Ken, from the link, it mentioned it is working on Chrome and Firefox right? I am using Chrome but it is not working. Am I missing some coding to make it work? Adam, inside the coding, there is `context.drawImage(image, 0, 0, canvas.width, canvas.height);` So I guess it has already drawn into the canvas? As for change pixels and apply filters, I am new to it and have no clue to do it. I will look at the Lomo. — Sky, Sep 27 '13 at 21:11
CORS work in Chrome, Firefox etc. so if the image isn't loaded within the requirement of CORS you won't be able to get the pixels you need to filter them. The image must be loaded from same server. — , Sep 27 '13 at 23:36
By referring to the accepted answer from the link you gave, it is tested with cross domain? — Sky, Sep 28 '13 at 13:21

score 0 · Accepted Answer · answered Sep 28 '13 at 19:29

Thanks for the link provided. I further read on the COR issue and managed to locate that line of coding to be added.

img.crossOrigin = '';
//img domain different from app domain
img.src = 'http://xxx.jpg';

Simply set the crossOrigin property of the image to make it work. Basically, this will allow cross domain image for manipulation. Without it, any cross domain will be blocked and you will get the security exception. Really thanks for the helps! :)

To add-on, I have only tested using Chrome and is working.

html5 Image Filters with Canvas

1 Answers1