Canvas实现毛玻璃效果解决方式1:使用stackblur.js

在Android系统中实现图片的毛玻璃效果比较好用的类库是:Android StackBlur

官方Git地址:https://github.com/kikoso/android-stackblur

在前端Canvas中可以使用StackBlur.js:
Git地址:https://github.com/flozz/StackBlur

简单API说明:

API 调用

下面是针对不同的源(图片或者 Canvas 等)进行 StackBlur 的调用。

图像作为源:

StackBlur.image(sourceImage, targetCanvas, radius, blurAlphaChannel); 
  • sourceImage:HTMLImageElement或者它的id
  • targetCanvas:HTMLCanvasElement或者它的id
  • radius:模糊半径
  • blurAlphaChannel: 如果你想模糊一个 RGBA 的图像,就将其设置为true(可选,默认 =false)

RGBA Canvas 作为源:

StackBlur.canvasRGBA(targetCanvas, top_x, top_y, width, height, radius); 
  • targetCanvas:HTMLCanvasElement
  • top_x: 要模糊的矩形的左上角的水平坐标
  • top_y: 要模糊的矩形的左上角的垂直坐标
  • width: 要模糊的矩形宽度
  • height: 要模糊的矩形高度
  • radius: 模糊半径

RGB Canvas 作为源:

StackBlur.canvasRGB(targetCanvas, top_x, top_y, width, height, radius); 
  • targetCanvas:HTMLCanvasElement
  • top_x: 要模糊的矩形的左上角的水平坐标
  • top_y: 要模糊的矩形的左上角的垂直坐标
  • width: 要模糊的矩形宽度
  • height:要模糊的矩形高度
  • radius: 模糊半径

RGBA ImageData 作为源:

StackBlur.imageDataRGBA(imageData, top_x, top_y, width, height, radius); 
  • imageData: canvas 的ImageData
  • top_x:要模糊的矩形的左上角的水平坐标
  • top_y: 要模糊的矩形的左上角的垂直坐标
  • width: 要模糊的矩形宽度
  • height: 要模糊的矩形高度
  • radius: 模糊半径

RGB ImageData 作为源:

StackBlur.imageDataRGB(imageData, top_x, top_y, width, height, radius); 
  • imageData: canvas 的ImageData
  • top_x:要模糊的矩形的左上角的水平坐标
  • top_y: 要模糊的矩形的左上角的垂直坐标
  • width: 要模糊的矩形宽度
  • height: 要模糊的矩形高度
  • radius: 模糊半径

实例1:

<!--使用Canvas加载图片-->
<canvas id="canvas1" width="300" height="200"></canvas>
<br /><br />
<img id="img1" src="../Images/mm1.jpg" />
<script>
var img1 = document.getElementById('img1');
img1.onload = function () {
//调用模糊处理
StackBlur.image('img1', 'canvas1', 100, true);
}
</script>

实例2:相对完整点

1.添加引用

<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/bootstrap-slider/9.4.1/css/bootstrap-slider.css" rel="stylesheet"> <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script> <script src="../Js/stackblur.js"></script>

2.HTM和js

<!--使用Canvas加载图片-->
<canvas id="canvas1" width="300" height="200"></canvas>
<br /><br />
<img id="img1" src="../Images/mm1.jpg" />
<br />
<style>
#ex1Slider .slider-selection {
background: #BABABA;
}
</style>
<input id="ex1" data-slider-id="ex1Slider" type="text"
data-slider-min="0" data-slider-max="100" data-slider-step="1"
data-slider-value="100" />
<script>
var img1 = document.getElementById('img1');
img1.onload = function () {
//调用模糊处理
StackBlur.image('img1', 'canvas1', 100, true);
}
//滑动控件
$('#ex1').slider().on('change', function (e) {
var newValue = e.value.newValue;
//调用模糊处理
StackBlur.image('img1', 'canvas1', newValue, true);
});
</script>

Canvas模糊化处理图片、毛玻璃处理图片之stackblur.js的更多相关文章

  1. StackBlur.js

    StackBlur.js 是 Mario Klingemann 创建的一个快速的.接近高斯模糊的效果库. 更多信息: http://incubator.quasimondo.com/processin ...

  2. 基于html5 canvas 的强大图表插件【Chart.js】

    名词解释 Chart.js:是基于html5和canvas的强大图表插件,支持多样的图表形式,柱状线性饼环极地雷达等等: canvas:只兼容到IE9 excanvas.js:强大的第三方兼容插件,可 ...

  3. FLASH CC 2015 CANVAS (三) flash中写JS调用html中JS的函数,变量

    注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新 首先我们在HTML里的JS里面添加几行代码 我们在FLASH中新建一个元件,并拖入到舞台,在属性面板 ...

  4. FLASH CC 2015 CANVAS (二)html中写JS调用flash中的元件、函数、变量

    注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新 当你导出第一个canvas后,你会在保存fla的文件夹里 (每个项目默认位置)看到 如下文件,(请先 ...

  5. HTML5 Canvas JavaScript库 Fabric.js 使用经验

    首先,表明我的态度:采用 Flash 才是最优方案,不建议使用 HTML 5 的 Canvas 做一些生产/工业级的网页应用. Flash的优势一是浏览器支持好,二是代码成熟稳定.而HTML5 的 C ...

  6. [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标

    有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...

  7. js+canvas(H5)实现小球移动小demo

    *canvas提供画布,大小自定义,js得到画布,从画布对象通过getContext('2d')来得到画笔,然后就可以开始画了 代码: <!DOCTYPE html> <html l ...

  8. Canvas实用库Fabric.js使用手册

    简介什么是Fabric.js? Fabric.js是一个可以简化Canvas程序编写的库. Fabric.js为Canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工 ...

  9. canvas应用——将方形图片处理为圆形

    上段时间在项目中需要将方形图片处理为圆形图片,你可能会说直接用css设置border-radius: 50%就可以了,但是项目中还要将此图片的圆形图片作为一部分利用canvas将其绘制到一张背景图上面 ...

随机推荐

  1. [BZOJ 3888] [Usaco2015 Jan] Stampede 【线段树】

    题目链接:BZOJ - 3888 题目分析 首先,计算出每个线段在 x 坐标 0 处出现的时间开始点和结束点,就转成了时间轴上的线段. 然后就是看每条线段是否被 y 比它小的线段完全覆盖了.注意求出的 ...

  2. angularjs 资源集合

    AngularJS是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方面的不足. 源码托管在Github上,其通过使用指令(directives)结构来扩展HTML词汇 ...

  3. VLD(Visual LeakDetector)内存泄露库的使用

    VLD简介 由于C/C++语言没有所谓的垃圾收集器,内存的分配和释放都需要程序员自己来控制,这会给C/C++程序员带来一定的困难.当您的程序越来越复杂时,它的内存管理也会变得越来越困难.内存泄漏.内存 ...

  4. [LeetCode#12] Roman to Integer

    Problem: Given an integer, convert it to a roman numeral. Input is guaranteed to be within the range ...

  5. (转载)mysql中limit用法

    (转载)http://hi.baidu.com/sppeivan/item/e45179375d6778c62f8ec221   mysql中limit用法 使用查询语句的时候,经常要返回前几条或者中 ...

  6. 未能导入activex控件,请确保它正确注册"的完美解决方案

    这个错误“未能导入activex控件,请确保它正确注册”昨天下午让我和我同事花费了3个小时来调试这个错误,在使用VS2010的winfrom编程时加入com组件的时候,报这个错误(以一个客户的机器上) ...

  7. HDU-1035 Robot Motion

    http://acm.hdu.edu.cn/showproblem.php?pid=1035 Robot Motion Time Limit: 2000/1000 MS (Java/Others)   ...

  8. Matlab中常用操作

    (1)换行操作: 末尾加上“...”,然后加enter:有时候多条语句重起一行,这时shift+enter >> 4*sin(0.3)*...8 (2)一些快捷键: Ctrl+R 可多行同 ...

  9. Ural 1046 Geometrical Dreams(解方程+计算几何)

    题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1046 参考博客:http://hi.baidu.com/cloudygoose/item ...

  10. 355. Design Twitter

    二刷尝试了别的办法,用MAP代表关注列表. 然后不初始化,但是只要有用户被使用,而他又不在MAP里,就把他加进去,然后让他关注自己.. 但是这样做超时了. 问题在于这个题解法太多,有很多不同的情况. ...