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 doesn't necessarily have to be in a canvas if there is another way to blur and save it. I've tried using blur.js, pixastic.js, and foggy.js and all of them add the blur effect to the image but it stops there, I can't save it. I can right-click on the image but there is no "save image as" link. Thank you in advance for answering.

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

来源：https://stackoverflow.com/questions/20758233/html5-canvas-blur-and-save

标签

jquery

html5

canvas

blur