简单的JavaScript函数来模糊图像

Question

我正在使用[jQuery插件][1]创建一个模糊图像，代码如下:

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

我如何重写这个，而不是创建图像，我可以直接将其分配给< img class="blurthisimage" > ?

更新:

新代码仍然不能运行:

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

Answer 1

变化

img = new Image();

img = $(".blurthisimage");

试着检查图像是否加载了这个

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

如果您想在多个图像上使用此工作，请使用以下命令:

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});
        });
    }
});

如果这不起作用，在你的onload函数中添加一个警报，看看它是否会触发

Answer 2

img.onload函数是否被击中?如果代码甚至没有进入函数，可能是因为您在jQuery的.ready()函数中实例化了.onload代码，该函数等待页面加载才能运行代码(请参阅ready()文档)。当函数被实例化时，图像已经被加载，因此事件永远不会触发。