Html5 Canvas Blur And Save

August 11, 2022 Post a Comment

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.

Baca Juga

enter image description here

Here's example code:

<!doctype html>
<html lang="en">
<head>

  <style>
      body{ background-color: ivory; }
  </style>

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="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>
    <img id="blurMe" src="car.jpg"><br>
    <p>The canvas with blurred image</p>
    <canvas id="canvas" width=300 height=300></canvas><br>
    <p>An image using the canvas as .src</p>
    <img id="results">
</body>
</html>

Html5 Tutorial

Html5 Canvas Blur And Save

Solution 1:

Post a Comment for "Html5 Canvas Blur And Save"