Canvas 颜色反转
2024-09-26 09:05:22
ImageData中的元素反转颜色 255-data[i,i+1,i+2]
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>converse color</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) {
pixels[i] = 255 - pixels[i];
pixels[i + 1] = 255 - pixels[i + 1];
pixels[i + 2] = 255 - pixels[i + 2];
}
ctx.putImageData(imgData, 250, 0);
};
</script>
</body> </html>
最新文章
- Java 性能优化之 String 篇
- [Asp.net]常见word,excel,ppt,pdf在线预览方案,有图有真相,总有一款适合你!
- 小身材大用途,用PrimusUI驾驭你的页面
- css 隐藏超长的文本!!!
- Flexbox制作CSS布局实现水平垂直居中
- 免费电子书:Azure Web Apps开发者入门
- 使用 New Relic 监控接口服务性能
- HDU 2255 奔小康发大财
- 前端自动化学习笔记(一)——Yeoman,bower,Grunt的安装
- yii phpexcel自己主动生成文件保存到server上
- sql分页查询公式
- Laravel Not Found Exceptions 取数据的一个小技巧
- 位(bit)、字节(byte)、字符、编码之间的关系
- zookeeper资料
- Docker Compose 一键部署LNMP
- VS2010 设置main函数输入参数
- 20145317《网络对抗》shellcode注入&;Return-to-libc攻击深入
- c# 输入多个数字,当输入不是数字时显示出刚输入的所有数并按降序
- SSH端口三种转发方式
- 转 zabbix 用户建立和中文化