Html5 Canvas Blur And Save
Here is what's bothering me. Let's say I have a picture of a car. I would like to put that picture in a canvas, blur it and then save the blurred image. Is it possible? The image d
Solution 1:
You can do that with a great little script called stackblur:
http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
Stackblur.js:
- Takes an img element,
- Blurs that image and
- Writes the blurred image to a canvas.
You control the "blurriness" by changing the blur radius:
var blurRadius=5;
stackBlurImage("blurMe","canvas",blurRadius,false);
Then you can use canvas.toDataURL to get the data url of the blurred image on the canvas.
Here's example code:
<!doctype html><htmllang="en"><head><style>body{ background-color: ivory; }
</style><scriptsrc="http://code.jquery.com/jquery-1.9.1.js"></script><scriptsrc="stackblur.js"></script><script>
$(function() {
stackBlurImage("blurMe","canvas",5,false);
document.getElementById("results").src=document.getElementById("canvas").toDataURL();
}); // end $(function(){});</script></head><body><p>The original img element</p><imgid="blurMe"src="car.jpg"><br><p>The canvas with blurred image</p><canvasid="canvas"width=300height=300></canvas><br><p>An image using the canvas as .src</p><imgid="results"></body></html>
Post a Comment for "Html5 Canvas Blur And Save"