Question

So I want to try the Pixastic blur fast method to blur an image.
The code they supply in the documentation is the following:

var img = new Image();
img.onload = function() {
    Pixastic.process(img, "blurfast", {amount:0.5});
}
document.body.appendChild(img);
img.src = "myimage.jpg";

But when I try it on my page like this:

$(document).ready(function() {
    var myImg = new Image();
    myImg.onload = function() {
        Pixastic.process(myImg, "blurfast", {amount:0.5});
    }
    document.body.appendChild(myImg);
    myImg.src = "../img/theImage.jpg";
});

It simply does nothing.

I also tried to call it like this, also without any result:

var img = new Image();
$(".div img").load(function(){
    Pixastic.process(img, "blurfast", {amount:0.5});
});
document.body.appendChild(img);
img.src = "../img/theImage.jpg";

It does not even throw an error!

I tried to understand what is happening: In img, a new image is created. As soon as the image in .div has loaded, Pixastic fires and adds the blur effect to the newly created image. Now, the image is applied as a child and gets a src attribute.

As you probably notice, I have some logical errors in there, but I can’t get this clear. I believe that in the above code, img is not always the same. Sometimes it’s the variable, sometimes it has to be the actual image from the img-tag. Is this true? Or do you see any other thing that strikes you? Why is it not working?

Answer 1

Ok, got it!
I need to call it through the jQuery method for some reason. Like:

$(".div img").pixastic("blurfast", {amount:0.5});