JavaScript - Pixastic - Error : this operation is unsecure

Question

I'm trying to desaturate an image using Pixastic. I donwloaded the script from the official website and checked the only things needed (core, jquery plugin, and desaturate effect).

I tried using the same code as they show in the demo, except that i enclosed it inside the .ready function of jQuery, but this isn't supposed to cause problems :

(function($) {
    $(document).ready(function() {
        var img = new Image();
        img.onload = function() {
            // document.body.appendChild(img); // Ialso tried putting this here.
            Pixastic.process(img, "desaturate", {average : false});
        };
        document.body.appendChild(img);
        img.src = "http://127.0.0.1/some_path/Wallpapers/ (10).jpg"; // This URL does point to the image file.
    });
})(window.jQuery);

But i always get the same error : This operation is unsecure. The error comes from the Pixastic js file at line 374 :

prepareData : function(params, getCopy) {
            var ctx = params.canvas.getContext("2d");
            var rect = params.options.rect;
            var dataDesc = ctx.getImageData(rect.left, rect.top, rect.width, rect.height); // 374
            var data = dataDesc.data;
            if (!getCopy) params.canvasData = dataDesc;
            return data;
        },

I'm developing on a local wamp server.

Any idea about what i'm doing wrong ? Thanks for your help ! :)

Answer 1

Found the problem :

I had to use 127.0.0.1 instead of localhost in the browser address bar. If someone knows the exact reason, feel free to edit.

Answer 2

the URL for the image in the code must match the URL that you use to serve the pages from. I would use a relative URL in the code. If the image comes from a different domain then the server that serves the image must support CORS (http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) for this to work.