Pixastic doesn't work properly for me, why?

Question

I need to do some interactive image processing on a webpage. I found pixastic and it seemed good for the job.

On this page I'm trying do blur an image, but I can only get "blurfast" to work. "blur" doesn't work for me.

I've been looking around and reading the documentation and can't see why it fails. Has anyone any idea?

I use this js:

$(function(){
    var img = document.getElementById("imageone");

    $("#blurfastbutton").click(function() {
        Pixastic.process(img, "blurfast", {amount:0.2});
    });

    $("#blurbutton").click(function() {
        Pixastic.process(img, "blur");
    });
});

Answer 1

For many manipulations, Pixastic has to swap the <img> element with a <canvas> element and perform per-pixel adjustments. A security exception is being thrown when the image is being manipulated using "blur", because the image source resides on different domain to the document.

You should also be aware that, due to security restrictions in the canvas element, Pixastic will only work with images that reside on the same host as the page you're using it on. [source]

The reason this doesn't happen with "blurfast" is because it works differently: resizing the image over and over again by very small amounts. This, apparently, doesn't violate the security policies of the <canvas> element.

The best approach is to stick to "blurfast" — it is faster and more dynamic, after all. If you really want to use "blur" then you'll have to ensure that all images are on the same domain as the current document.