我们可以通过下面几种方法，将其转换为灰度：
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. ural1890 Money out of Thin Air

    Money out of Thin Air Time limit: 1.0 secondMemory limit: 64 MB Each employee of the company Oceanic ...

  2. HDU 3255 Farming

    矩形面积并变形,一层一层的算体积 #include<cstdio> #include<cstring> #include<cmath> #include<ma ...

  3. hibernate--一对多 多对一 双向关联 (重点!!!)

    一方 group: package com.bjsxt.hibernate; import java.util.HashSet; import java.util.Set; import javax. ...

  4. away3d 汽车路线编辑器

    2012年的时候,跟朋友去到一个公司,打算用away3d做一个赛车模拟养成游戏,后来由于种种原因,立项未成,由于朋友已经转行,自己也想对自己做过的事情有一些交代,所以将我负责的部分,赛道编辑器的源码公 ...

  5. CentOS 5.8 x64 安装TomCat

    简单记录一下...虽然安装很简单... 首先下载配置安装 jdk http://www.oracle.com/technetwork/java/javase/downloads/jdk-6u25-do ...

  6. mysql--学生课程成绩表

    创建表student: CREATE TABLE `student` ( `sid` INT(11) NOT NULL AUTO_INCREMENT, `sname` VARCHAR(20) NOT ...

  7. C#设计模式(6)——原型模式

    一.概念 二.模型 三.代码实现 ///火影忍者中鸣人的影分身和孙悟空的的变都是原型模式 class Client { static void Main(string[] args) { // 孙悟空 ...

  8. XCode 7上传遇到ERROR ITMS-90535 Unexpected CFBundleExecutable Key. 的解决办法

    去第三方的info.plist文件中,比如TencentOpenApi_IOS_Bundle.bundel 的info.plist ,删除 executable file 这一行

  9. WCF中传递对象的成员变量行不通？

    今早通过WCF服务添加对象到数据库,有一个变量始终没有传过来 定义: public bool isLogin; 修改成 private bool _isLogin; public bool isLog ...

  10. Memcached源码分析之thread.c

    /* * 文件开头先啰嗦几句: * * thread.c文件代表的是线程模块.但是你会看到这个模块里面有很多其它方法, 例如关于item的各种操作函数,item_alloc,item_remove,i ...