Is there a way to apply a "blur" effect on a background image in Javascript/jQuery?
[edit] By "blur" I mean a Gaussian/Motion blur not a drop shadow :)
Thank you.
The simplest, most cross-browser-friendly way to do this will be to create blurred and non-blurred versions of your background image ahead of time, and use JavaScript to swap the blurred version in when you want to. Something like:
$('#hoverMe').hover(function ()
{
$(this).css('background-image', 'url(blurredBackground.png)');
});
Edit: It's a bit of a cop-out, but all you need to do is create a new image element for Pixastic to operate on. Since Pixastic uses a canvas anyway, you can let the library do the work for you, and then just call toDataURL()
to get a URL string. Then, pass that string back into the background-image
CSS.
Very basic demo here . Tested in Chrome, Firefox.
Notes:
canvas
, as per the spec . This is why my example image is jsbin's favicon, and not an image that's bigger/more interesting/from anywhere else. toDataURL()
so the browser doesn't have to repeat its work. I don't know how toDataURL()
works under the hood so this might not be entirely straightforward. Happy blurring!
I encountered the same problem today, My solution was the following. I used the regular way to use pixastic and blur an image. Pixastic then in my case created a canvas element. I made sure this canvas element had an id, and by getting its data, i used the data to set my background-image.
Example:
HTML:
<div id="hiddenDiv" style="width:0px; height: 0px;"></div>
Javascript:
var img = new Image();
img.id = "blurredImage"
img.onload = function() {
Pixastic.process(img, "blur", function(){
var canvas = document.getElementById('blurredImage');
var dataURL = canvas.toDataURL("image/png");
document.getElementById('blurredImage').style.backgroundImage = 'url("' + dataURL + '")';
});
}
document.getElementById("hiddenDiv").appendChild(img);
img.src = "myimage.jpg";
It's quite a workaround, however I had to use floating divs, which made me unable to use position absolute, and z-index's and I won't blurr tons of images.
Goodluck!
有这个jquery-plugin blur.js可以满足您的需求。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.