Canvas 图片灰度
2024-09-21 16:41:31
我们可以通过下面几种方法,将其转换为灰度:
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>
最新文章
- JSON数据的使用
- HDU 1007Quoit Design(最近点问题)
- Ubuntu 14.04 LTS 更新源大全
- 开源实体映射框架EmitMapper介绍
- BIEE 11g学习
- 安装wamp,访问主页提示PHP configuration loaded file……
- 30道四则运算<;2>;
- C++学习40 抛出自己的异常
- Qt, 我回来了。。。
- WPA/WAP2wifi 密码破解笔记
- hdu 4690	EBCDIC
- C++ 数组作为函数参数时,传递数组大小的方法
- bzoj1004 Cards
- Red and Black(水)
- tcp入门(唐唐的故事)
- Node.js实战项目学习系列(5) node基础模块 path
- springboot+dubbo修改扫描路径引起端口占用的问题
- 基于centos7+nginx+uwsgi+python3+django2.0部署Django项目
- HDU 2000 ASCII码排序
- 转载 [c#] 虚函数(Virtual),抽象函数(abstract)和接口的区别
热门文章
- Android系统开机启动画面显示过程简要说明
- Object.defineproperty实现数据和视图的联动 ------是不是就是 Angular 模型和视图的同步的实现方式???
- PAT (Advanced Level) 1003. Emergency (25)
- 2016";百度之星"; - 资格赛(Astar Round1) Problem E
- ACM录 之 输入输出。
- Camera服务之--架构浅析
- windows矢量字体点阵数据的提取(转)
- iptabels 的一些配置
- SQL复习四(完整性约束)
- STL中list用法