CSS、JS、PHP将图片模糊(毛玻璃)效果

—— 图片转换成模糊效果
2017-11-30 阅读(787)

收藏一个模糊图片效果的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>

看下图,对比各个浏览器的处理效果和兼容性。

各浏览器模糊效果图.jpg

模糊效果、差异、区别、边界,自己好好看上例图,体会下、感受下和发散思维下。


例子二:综合

<!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();

统一效果 :

统一php处理模糊效果图.jpg


zip icon
前端与后端图片模糊效果例子.zip 5a002667fcda13c2e319e09a61150efb

已下载:6 次     

原创文章,转载请注明出处:https://www.weizhixi.com/user/index/article/id/10.html

分类:
点击(954) 阅读(787) 举报

我的相关

相关推荐