Search code examples
javascriptimagecanvaspixastic

JavaScript - Pixastic - Error : this operation is unsecure

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 ! :)

Solution

  • 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.