Html5画布模糊和保存 | Html5画布模糊和保存

本文介绍了Html5画布模糊和保存的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这里是打扰我。让我们说我有一辆汽车的图片。我想把这张图片放在画布上，模糊，然后保存模糊的图像。是否可以？如果有另一种模糊和保存的方式，图像不一定必须在画布上。我尝试使用 blur.js ， pixastic.js 和 foggy.js 并且所有的人都添加模糊效果到图像，但它停在那里，我不能保存它。我可以右键单击该图像，但没有将图像另存为链接。

解决方案

您可以使用一个名为stackblur的小脚本来实现这一点：

Stackblur.js：

将模糊图像写入画布。

您可以通过更改模糊半径来控制模糊度：

  var blurRadius = 
 
 stackBlurImage（blurMe，canvas，blurRadius，false）;

然后，您可以使用canvas.toDataURL获取画布上模糊图像的数据网址。 / p>

以下是示例代码：

 <！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结果）。src = document.getElementById（canvas）。toDataURL（）; 
 
 
}）; // end $（function（）{}）; 
 
< / script> 
< / head> 
< body> 
< p>原始img元素< / p> 
< img id =blurMesrc =car.jpg>< br> 
< p>具有模糊图像的画布< / p> 
< canvas id =canvaswidth = 300 height = 300>< / canvas>< br> 
< p>使用canvas作为.src的图像< / p> 
< img id =results> 
< / body> 
< / html>

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.

解决方案

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>

这篇关于Html5画布模糊和保存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！