前面展示了一些canvas实现图片滤镜效果的展示,并且给出了相应的算法,下面来介绍一下具体的实现方法。

前面介绍的特效中灰度效果最简单,就从这里开始介绍吧。

1.获取图像数据

  1. img.src = ’http://bloglaotou.duapp.com/wp-content/themes/frontopen2/tools/filter/image2.jpg’;
  2. canvas.width  = img.width;
  3. canvas.height = img.height;
  4. var context = canvas.getContext(“2d”);
  5. context.drawImage(img, 0, 0);
  6. var canvasData = context.getImageData(0, 0, canvas.width, canvas.height);

2.通过灰度算法处理图像数据

  1. //  1.灰度效果
  2. //计算公式 .299 * r + .587 * g + .114 * b;
  3. // calculate gray scale value
  4. for ( var x = 0; x < canvasData.width; x++) {
  5. for ( var y = 0; y < canvasData.height; y++) {
  6. // Index of the pixel in the array
  7. var idx = (x + y * canvasData.width) * 4;
  8. var r = canvasData.data[idx + 0];
  9. var g = canvasData.data[idx + 1];
  10. var b = canvasData.data[idx + 2];
  11. var gray = .299 * r + .587 * g + .114 * b;
  12. // assign gray scale value
  13. canvasData.data[idx + 0] = gray; // Red channel
  14. canvasData.data[idx + 1] = gray; // Green channel
  15. canvasData.data[idx + 2] = gray; // Blue channel
  16. canvasData.data[idx + 3] = 255; // Alpha channel
  17. // 加上黑色的边框
  18. if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8))
  19. {
  20. canvasData.data[idx + 0] = 0;
  21. canvasData.data[idx + 1] = 0;
  22. canvasData.data[idx + 2] = 0;
  23. }
  24. }
  25. }

3.把新的图像数据写入canvas

  1. context.putImageData(canvasData, 0, 0);

4.效果预览

这里看预览

用canvas实现图片滤镜效果详解之灰度效果的更多相关文章

  1. 用canvas实现图片滤镜效果详解之视频效果

    这是一个很有意思的特效,模拟摄像机拍摄电视屏幕画面时出现点状颗粒的效果.颗粒的大小通过变换矩阵实现,可以任意调节,有兴趣研究的朋友可以尝试更多的效果,代码没有经过优化,只是一个粗糙的Demo,大家可以 ...

  2. PNG,JPEG,BMP,JIF图片格式详解及其对比

    原文地址:http://blog.csdn.net/u012611878/article/details/52215985 图片格式详解 不知道大家有没有注意过网页里,手机里,平板里的图片,事实上,图 ...

  3. .NET DLL 保护措施详解(三)最终效果

    针对.NET DLL 保护措施详解所述思路完成最终的实现,以下为程序包下载地址 下载 注意: 运行环境为.net4.0,需要安装VS2015 C++可发行组件包vc_redist.x86.exe.然后 ...

  4. android shape的使用详解以及常用效果(渐变色、分割线、边框、半透明阴影效果等)

    shape使用.渐变色.分割线.边框.半透明.半透明阴影效果. 首先简单了解一下shape中常见的属性.(详细介绍参看  api文档 ) 转载请注明:Rflyee_大飞: http://blog.cs ...

  5. ios学习--详解IPhone动画效果类型及实现方法

    详解IPhone动画效果类型及实现方法是本文要介绍的内容,主要介绍了iphone中动画的实现方法,不多说,我们一起来看内容. 实现iphone漂亮的动画效果主要有两种方法,一种是UIView层面的,一 ...

  6. [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

    本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...

  7. Canvas入门到高级详解(中)

    三. canvas 进阶 3.1 Canvas 颜色样式和阴影 3.1.1 设置填充和描边的颜色(掌握) fillStyle : 设置或返回用于填充绘画的颜色 strokeStyle: 设置或返回用于 ...

  8. 用canvas实现图片滤镜效果

    1.灰度效果 图片过滤效果之灰度效果 算法及原理: .299 * r + .587 * g + .114 * b; 2.油画效果 算法及原理: 用当前点四周一定范围内任意一点的颜色来替代当前点颜色,最 ...

  9. Canvas学习:globalCompositeOperation详解

    在默认情况之下,如果在Canvas之中将某个物体(源)绘制在另一个物体(目标)之上,那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面. 简单点讲,在Canvas中,把图像源和目标图像,通过Ca ...

随机推荐

  1. Comet技术浅论

    1.如何实现一个轮询? function getMessage(url,callback){ var XHR=new XMLHttpRequest(); XHR.open('get',url,true ...

  2. ASP.NET Excel 导入 Oracle 方法2

    先谈思路:前半部分和之前那篇日志的内容是一样的,把Excel数据导入到DataSet中,不同之处在于数据插入的方式: 本方法是拼接 INSERT INTO TABLE VALUES() 字符串,对,就 ...

  3. Python下载Yahoo!Finance数据

    Python下载Yahoo!Finance数据的三种工具: (1)yahoo-finance package. (2)ystockquote. (3)pandas.

  4. [你必须知道的.NET]第三十五回,判断dll是debug还是release,这是个问题

    发布日期:2009.12.29 作者:Anytao © 2009 Anytao.com ,Anytao原创作品,转贴请注明作者和出处. 问题的提出 晚上翻着群里的聊天,发现一个有趣的问题:如何通过编码 ...

  5. Linux网络编程3——socket

    宏定义 首先介绍两个宏定义,看如下代码 代码1 /************************************************************************* & ...

  6. java反射机制(基础版)

    package com.reflect; import java.lang.reflect.Constructor; import java.lang.reflect.Field; import ja ...

  7. list, set操作

    def union_list(l1, l2): result = [] if not l1: result.extend(l2) return result if not l2: result.ext ...

  8. Linux基础--文件与目录管理

    1.目录与路径 1)特殊目录 .   代表此层目录 ..  代表上一层目录 -   代表前一个工作目录 ~   代表『目前使用者身份』所在的家目录 ~account   代表account这个使用者的 ...

  9. ps里面的批处理教程

    先打开窗口-动作 1.新建动作文件 打开一张图片,进行图片编辑,编辑完就是把图片保存在一个文件里面.停止动作. 再去打开ps文件-自动- 批处理 只要把 包含所有子文件夹(I)勾起来就行了 设置就能完 ...

  10. 一行代码设置TForm颜色的前世今生(属性赋值引起函数调用,然后发消息实现改变显示效果),TForm的初始颜色在dfm中设置了clBtnFace色

    来自万一的帖子:http://www.cnblogs.com/del/archive/2008/04/27/1173658.html的确做到了一行代码设置TForm控件的颜色(一点感想:Delphi程 ...