Simple JavaScript function to blur an image

Question

I'm using a [jQuery plugin][1] to create a blur an image with the following code:

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

});

How can I rewrite this so than rather than creating the image I can just assign it to < img class="blurthisimage" >?

UPDATE:

New code still not working:

<img src="image.jpg" class="blurthisimage" />

<script type="text/javascript">
$(document).ready(function(){
var img = $(".blurthisimage");
img.onload = function() {
    Pixastic.process(img, "blurfast", {amount:1});
}
});
</script>

brenjt · Accepted Answer · 2011-10-11T02:09:56.467

1

Change

img = new Image();

to

img = $(".blurthisimage");

UPDATE Try checking to see if the image is loaded with this

if (img[0].complete == true) {
    Pixastic.process(img[0], "blurfast", {amount:1});
}
else {
    img.load(function () {
        Pixastic.process(img[0], "blurfast", {amount:1});
    });
}

if you wanted to have this work on multiple images use the following:

img.each(function(index, element)
{
    if (img[index].complete == true) {
        Pixastic.process(img[index], "blurfast", {amount:1});
    }
    else {
        img.load(function () {
            Pixastic.process(img[index], "blurfast", {amount:1});
        });
    }
});

If that doesn't work add an alert to inside your onload function to see if it even fires

edited Oct 11 '11 at 02:09

answered Oct 11 '11 at 01:16

brenjt

15,997
13
77
118

thank you but it's not working. I've updated my post with the new code – fxfuture Oct 11 '11 at 01:24
still not working unfortunately. ive put an alert on img.load and it's not triggering it at all – fxfuture Oct 11 '11 at 01:33
@fxfuture what about in the if statement. the Image may be cached therefore it's not going to the `img.load` function – brenjt Oct 11 '11 at 01:34
sorry it's the other way around. the img.load function is triggering the alert but not blurring the image – fxfuture Oct 11 '11 at 01:42
and the if statement is not triggering anything – fxfuture Oct 11 '11 at 01:46
@fxfuture Change `Pixastic.process(img` to `Pixastic.process(img[0]` The first is a jQuery object containing the img and the second is the image itself. – brenjt Oct 11 '11 at 01:50
when i put this into my wordpress site it doesn't work at all. any ideas why this could be? – fxfuture Oct 11 '11 at 02:05
With wordpress you'll need to change every `$` to `jQuery` – brenjt Oct 11 '11 at 02:06
I've done that but it doesn't make any difference. I've used exactly the same code so confused why it's not working – fxfuture Oct 11 '11 at 02:31
On wordpress it's not triggering the onload function, just the if statement. also the code seems to conflict with jquery supersized but even if I remove reference to supersized this it still doesn't work – fxfuture Oct 11 '11 at 02:45
fixed it :) it was a conflict with the script – fxfuture Oct 11 '11 at 03:00

score 1 · Answer 2 · edited Oct 11 '11 at 01:32

1

Is the img.onload function getting hit? If the code is not even getting into the function it might be because you instantiate the .onload code in jQuery's .ready() function which waits until the page is loaded to run the code (see the ready() documentation) . By the time the function gets instantiated the image has already been loaded so that event will never fire.

edited Oct 11 '11 at 01:32

eykanal

26,437
19
82
113

answered Oct 11 '11 at 01:30

Keith.Abramo

6,952
2
32
46

Simple JavaScript function to blur an image

2 Answers2