我们可以通过下面几种方法，将其转换为灰度：
1.浮点算法：Gray=R*0.3+G*0.59+B*0.11
2.整数方法：Gray=(R*30+G*59+B*11)/100
3.移位方法：Gray =(R*76+G*151+B*28)>>8;
4.平均值法：Gray=（R+G+B）/3;
5.仅取绿色：Gray=G；
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>gray</title>

</head>

<body>

    <canvas id='myCanvas' width='800' height='600'>

        your browser does not support canvas

    </canvas>

    <script type="text/javascript">

    var c = document.getElementById('myCanvas');

    var ctx = c.getContext('2d');

    var img = new Image();

    img.src = 'face.jpg';

    img.onload = function() {

        ctx.drawImage(img, 0, 0);

        var imgData = ctx.getImageData(0, 0, 250, 250);

        var pixels = imgData.data;

        for (var i = 0, n = pixels.length; i < n; i += 4) {

            var grayscale = pixels[i] * .3 + pixels[i + 1] * .59 + pixels[i + 2] * .11;

            pixels[i] = grayscale;

            pixels[i + 1] = grayscale;

            pixels[i + 2] = grayscale;

        }

        ctx.putImageData(imgData, 250, 0);

    };

    </script>

</body>

</html>

Canvas 图片灰度的更多相关文章

  1. css 实现图片灰度

    先看效果鼠标移入图片中摁下向左移动 图片由灰度变为原图   向右移动原图变灰度 ​ 代码如下:尚未做优化 <style> *{ margin:0; padding:0; } #img{ w ...

  2. canvas 图片拖拽旋转之二——canvas状态保存(save和restore)

    引言 在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需 ...

  3. HTML5开发笔记：初窥CANVAS，上传canvas图片到服务器

    项目做到一个裁切图片的功能,就是让用户上传头像的时候可以裁切一下图片,选择一个合适大小位置来作为头像.之中用到了crop.js这个插件,用canvas直接绘制了用户裁切缩放后的图片.裁切的过程这边就不 ...

  4. Atitit 图像处理 灰度图片 灰度化的原理与实现

    Atitit 图像处理 灰度图片 灰度化的原理与实现 24位彩色图与8位灰度图 首先要先介绍一下24位彩色图像,在一个24位彩色图像中,每个像素由三个字节表示,通常表示为RGB.通常,许多24位彩色图 ...

  5. CSS 实现图片灰度效果 兼容各种浏览器

    CSS 实现图片灰度效果 兼容各种浏览器如360浏览器 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. ...

  6. JavaScript修改Canvas图片

    用JavaScript修改Canvas图片的分辨率(DPI)   应用场景: 仓库每次发货需要打印标签, Canvas根据从数据库读取的产品信息可以生成标签JPG, 但是这个JPG图片的默认分辨率(D ...

  7. canvas图片合成中的坑

    需求 要用代码来实现多张外部图片和文字的合并而且要上传到七牛云,再将图片链接通过客户端分享出去.图片背景需要支持用户自定义更换. 实现方案 在一个canvas上多次调用drawImage函数,分别绘制 ...

  8. canvas图片与img图片的相互转换

    最近在一个项目中,遇到了一个问题,需要把生成的canvas形式的二维码转换为图片,可以长按识别,保存等.查找了一些资料归纳总结了一些知识. 默认在jq库里进行,引入jquery.qrcode.min. ...

  9. CSS 实现图片灰度效果

    非原创-从网上收索出来的文章 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. 方式1. IE滤镜 img ...

随机推荐

  1. uwsgi性能调忧

    摘要:调大uwsgi配置中 listen=1024的数目是提高并发能力最有效的办法.第二种方法是调大processes数目 发现总是超时报警 1  使用ab确定网络具体征况 [bre@dmp-1 ~] ...

  2. 一个UWSGI的例子

    摘要:uwsgi执行顺序:启动master进程,执行python脚本的公共代码(import同一层).然后生成worker进程,uwsgi.post_fork_hook=init_functions, ...

  3. protobuf python api

    摘要: python中一切都可以看作类.那么如何查看每个类的API.使用ipython python  protobuf 的函数在message中定义 此处所有的api说明:https://devel ...

  4. RS485中继器电路(转)

    源:RS485中继器电路(转) --------以上部分请勿修改!------------- RS-485中继器 由于在双绞线上的电平损耗,RS-485标准通信的最大传输距离是1200米(4000英尺 ...

  5. [iOS Animation]-CALayer 显示动画

    显式动画 如果想让事情变得顺利,只有靠自己 -- 夏尔·纪尧姆 上一章介绍了隐式动画的概念.隐式动画是在iOS平台创建动态用户界面的一种直接方式,也是UIKit动画机制的基础,不过它并不能涵盖所有的动 ...

  6. Servlet实现文件上传（深度）（二）

    1.首先我们定义struts.properties的文件上传中的规则如下 struts.action.extension=action  <!--以.action为我们提交的后缀名-->s ...

  7. Servlet实现文件上传（简单）（一）

     1..使用到的jar包,为apache的一个子项目  此commons-fileupload-1.2.2需要以下commons-io-2.0.1的支持   2.页面展示fileUpload.jsp ...

  8. nginx实战

    原文:http://www.cnblogs.com/yucongblog/p/6289628.html nginx实战   (一) nginx环境的搭建安装流程: 1 通过ftp将nginx-1.11 ...

  9. UITableView回调和table相关成员方法详解

    http://blog.csdn.net/kingsley_cxz/article/details/9123959 1.UITableView的datasource实现: //回调获取每个sectio ...

  10. S3C2440硬件连接解析

    S3c2440是三星公司推出的一款基于ARM920T的处理器,采用ARM内核,不同于单片机,无片上rom与ram,必须搭配相应的外围电路进行使用,现在,让我们从零开始进行这一块MCU的学习,为了入门简 ...