CSS、JS、PHP将图片模糊(毛玻璃)效果
收藏一个模糊图片效果的css+js。虽然能兼容各种浏览器，但是这种方法得出来的效果不太理想。
例如：
1、各个浏览器兼容情况不统一，模糊效果也不统一，处理效率也不统一。
2、图片模糊后四周缩小或扩散，而且不能局部控制图片。
3、模糊图片需要消耗性能。模糊图片不能过多。部分手机用户滑动页面会卡顿，机器发热。
不过，虽然有缺点但是还是很好用。
1、使用CSS
CSS：
.blur{
filter: url(blur.svg#blur);/* FireFox, Chrome, Opera */
-webkit-filter: blur(10px);/* Chrome, Opera */
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);/* IE6~IE9 */
}HTML：
<table border="1px"> <tr> <td><p>原图<p><img src="1.jpg" /></td> <td><p>使用CSS<p><img src="1.jpg" class="blur"/></td> </tr> </table>
SVG：
<?xml version="1.0" standalOne="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="blur"> <feGaussianBlur stdDeviation="10" /> </filter> </svg>
以上代码除了 ie10和ie11不兼容外，其他各大主流浏览器都能兼容。
2、使用JS
StackBlur.js 是 Mario Klingemann 创建的一个快速的、接近高斯模糊的效果库。
StackBlur例子：http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
HTML：
<table border="1px"> <tr> <td><p>原图<p><img src="1.jpg" id="blur" Onload="blurImage()"/></td> <td><p>使用JS<p><canvas id="canvas"></canvas></td> </tr> </table>
JS：
function blurImage(){
try{
stackBlurImage('blur','canvas',10,false);
}catch(e){
alert("浏览器不支持JS Blur");
}
}以上代码 Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 等都支持
注意：不要直接在本地用浏览器打开测试或图片没加载完成就调用函数，部分浏览器会报错：Cannot access local image。
第1、2参考自：http://www.zhangxinxu.com/wordpress/2013/11/css-svg-image-blur/
除了以上2种方法外，你还可以在后端程序处理生成模糊图片后，在前端直接显示，兼容性完胜，效率完胜。不过处理模糊需要消耗服务器性能，php imagick 可以简单调用高斯模糊，处理效率还算可以，起码比内置的GD库效果好很多效率快。但是如果使用服务器频繁处理模糊图片的话，显然不合理。
3、使用PHP
header('Content-type: image/jpeg');
$image = new Imagick('1.jpg');
$image->blurImage(5,5);
echo $image;header('Content-type: image/jpeg');
$imagick = new Imagick('1.jpg');
$imagick->gaussianBlurImage(5, 5);
echo $imagick->getImageBlob();还可以使用Grafika库
是用composer的朋友可以直接运行
composer require kosinix/grafika:dev-master --prefer-dist
或者直接到官网下载
https://kosinix.github.io/grafika/
require_once 'grafika/src/autoloader.php';
use Grafika\Grafika;
header('Content-type: image/jpeg');
$editor = Grafika::createEditor();
$editor->open($image, '1.jpg');
$filter = Grafika::createFilter('Blur', 10);
$editor->apply($image, $filter);
//$editor->save($image, '1_blur.jpg');
echo $image->getCore();4、例子
例子一：测试
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" cOntent="text/html; charset=utf-8" />
<title>例子一：测试</title>
<style>
table td{padding:0 20px;}
.blur{
filter: url(blur.svg#blur);/* FireFox, Chrome, Opera */
-webkit-filter: blur(10px);/* Chrome, Opera */
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);/* IE6~IE9 */
}
</style>
<script src='StackBlur.js'></script>
<script>
function blurImage(){
try{
stackBlurImage('blur','canvas',10,false);
}catch(e){
alert("浏览器不支持JS Blur");
}
}
</script>
</head>
<body>
<table border="1px">
<tr>
<td><p>原图<p><img src="1.jpg" id="blur" Onload="blurImage()"/></td>
<td><p>使用CSS<p><img src="1.jpg" class="blur"/></td>
<td><p>使用JS<p><canvas id="canvas"></canvas></td>
</tr>
</table>
</body>
</html>看下图，对比各个浏览器的处理效果和兼容性。
模糊效果、差异、区别、边界，自己好好看上例图，体会下、感受下和发散思维下。
例子二：综合
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" cOntent="text/html; charset=utf-8" />
<title>例子二：综合</title>
<style>
.blur {
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
}
:root .blur {
display: none; /* IE9+, Firefox, Chrome, Opera : hidden */
filter: none; /* NO IE9 */
}
</style>
<script src='StackBlur.js'></script>
<script>
function blurImage(){
try{
stackBlurImage('blur','canvas',10,false);
}catch(e){
}
}
</script>
</head>
<body>
<img src="1.jpg" id="blur" class="blur" Onload="blurImage()"/>
<canvas id="canvas"></canvas>
</body>
</html>例子三：后端PHP处理
<?php
/**
* Created by PhpStorm.
* User: cxq
* Date: 2017-11-30
* Time: 22:37
*/
//header('Content-type: image/jpeg');
//$image = new Imagick('1.jpg');
//$image->blurImage(5,5);
//echo $image;
//header('Content-type: image/jpeg');
//$imagick = new Imagick('1.jpg');
//$imagick->gaussianBlurImage(5, 5);
//echo $imagick->getImageBlob();
require_once 'grafika/src/autoloader.php';
use Grafika\Grafika;
header('Content-type: image/jpeg');
$editor = Grafika::createEditor();
$editor->open($image, '1.jpg');
$filter = Grafika::createFilter('Blur', 10);
$editor->apply($image, $filter);
//$editor->save($image, '1_blur.jpg');
echo $image->getCore();统一效果 ：
已下载：569 次
原创文章，转载请注明出处：https://www.weizhixi.com/article/10.html