前面展示了一些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. 链表(c语言实现)--------------小练习

    #include <stdio.h> #include <stdlib.h> #include <string.h> #define MAX_SIZE 100 #d ...

  2. codeforces 430A Points and Segments (easy)(理解能力有待提高……)

    题目 //终于看懂题目了,,,, //一条线段里面不是每个坐标上都有要染色的点,所以为了满足条件,只能考虑那些给出坐标的点 //所以就要排序一下了,不能直接根据坐标0 1 0 1…… #include ...

  3. CodeForces 1B Spreadsheets (字符串处理,注意细节,大胆尝试)

    题目 注意模后余数为0时,要把除以26后的新数据减1,为什么这样,要靠大胆尝试.我在对小比赛中坑了一下午啊,直到比赛结束也没写出这道题....要死了.. #include<stdio.h> ...

  4. LA 3713

    The Bandulu Space Agency (BSA) has plans for the following three space missions: Mission A: Landing ...

  5. 评论 “App死亡潮:400万应用僵尸超八成,周期仅10月”

    点这里 原文: App死亡潮:400万应用僵尸超八成,周期仅10月 时间 2015-04-05 22:48:19  和讯科技相似文章 (16)原文  http://tech.hexun.com/201 ...

  6. ***Jquery下Ajax与PHP数据交换

    一.前台传递字符串变量,后台返回字符串变量(非json格式) Javascript代码: 这里,为了解决Ajax数据传递出现的汉字乱码,在字符串传递之前,使用javascript函数escape()对 ...

  7. WCF分布式开发步步为赢(9):WCF服务实例激活类型编程与开发

    .Net Remoting的激活方式也有三种:SingleTon模式.SingleCall模式.客户端激活方式,WCF服务实例激活类型包括三种方式:单调服务(Call Service),会话服务(Se ...

  8. UVA 11038 - How Many O's? 计算对答案的贡献

    题意: 求[n, m]之间包含0的数字的个数题解:转化为求solve(n) - solve(m-1)的前缀问题 对于求0到n的解,我们举例 n = 25789 对于8这位,让其为0对答案的贡献是 (0 ...

  9. UVA 10341 二分搜索

    Solve the equation:p ∗ e−x + q ∗ sin(x) + r ∗ cos(x) + s ∗ tan(x) + t ∗ x2 + u = 0where 0 ≤ x ≤ 1.In ...

  10. eclipse工程设置的问题