我们可以通过下面几种方法，将其转换为灰度：
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. Android 之 ServiceManager与服务管理

    ServiceMananger是android中比较重要的一个进程,它是在init进程启动之后启动,从名字上就可以看出来它是用来管理系统中的service.比如:InputMethodService. ...

  2. mariadb cache

    Since MariaDB Galera cluster versions 5.5.40 and 10.0.14 you can use the query cache. Earlier versio ...

  3. ural1671 Anansi's Cobweb

    Anansi's Cobweb Time limit: 1.0 secondMemory limit: 64 MB Usatiy-Polosatiy XIII decided to destroy A ...

  4. [算法] dijkstra单源无负权最小路径算法

    #include <stdio.h>#include <stdlib.h>#include <string.h> #define INF 1000000#defin ...

  5. Linux的iptables常用配置范例（2）

    iptables -F   #清除所有规则 iptables -X  #清除所有自定义规则 iptables -Z   #各项计数归零 iptables -P INPUT DROP  #将input链 ...

  6. js 各种常用js验证

    判断http或者https var http = 'https:' == document.location.protocol ? false : true; js的类型检测方式 /**** js的类 ...

  7. 编码器芯片MLX90363的使用

    文档资料 MLX90363 Datasheet MLX90363 Application Note 使用 对于编码器来说,Rotary Application模式 SPI驱动中,CS必须在8个字节都发 ...

  8. JAVA基础--代理模式

    interface Network{ public void browse() ; // 浏览 } class Real implements Network{ public void browse( ...

  9. Android SQLite总结[转载]

    [转载] :http://blog.163.com/zqy216_2008/blog/static/4119371820119954812509/ 最近在做的项目涉及到了SQLite,大学时没有好好学 ...

  10. 歪国人DIY的MINI四轴

    歪国人DIY的MINI四轴 Crazyflie 2.0 自己仿Crazyflie.CrazyPony