[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)
接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore)，相信大家都应该玩过美颜功能，而我们今天要讲的就是canvas强大的像素处理能力，通过像素处理，实现反色，黑白，亮度，复古，蒙版，透明等美颜效果.
getImageData：获取一张图片的像素数据
cxt.getImageData( x, y, width, height )
x：图片所在的x坐标
y: 图片所在的y坐标
width,height 要获取的像素区域
返回值是一个对象，对象包括一个data属性， 宽度，高度. data属性是一个巨大的数组，数组中存储的是这张图片的所有像素信息，每四个一组组成一个像素点的信息，如：
[r1,g1,b1,a1, r2,g2,b2,a2...]， r( 红色) g( 绿色) b( 蓝色 ) a( 透明度 )
putImageData：输出像素图片
putImageData( 像素对象, x, y )
注意：getImageData会产生跨域问题，所以你的程序要放在web服务器下，我这里是放在phpstudy下面.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8' />
<style>
#canvas {
border: 1px dashed #aaa;
}
</style>
<script>
window.onload = function () {
var oCanvas = document.querySelector("#canvas"),
oGc = oCanvas.getContext('2d'); var oImg = new Image();
oImg.src = './img/mv.jpg';
oImg.onload = function () {
oGc.drawImage(oImg, 10, 10);
var imgData = oGc.getImageData(10, 10, 200, 200);
console.log( imgData );
}
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
</body>
</html>
我这张图片的尺寸是200 x 200.
一：反色效果
算法：把每一个像素的r, g, b颜色取反就行，也就是( 255 - 原来的值 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8' />
<style>
#canvas {
border: 1px dashed #aaa;
}
</style>
<script>
window.onload = function () {
var oCanvas = document.querySelector("#canvas"),
oGc = oCanvas.getContext('2d'); var oImg = new Image();
oImg.src = './img/mv.jpg';
oImg.onload = function () {
oGc.drawImage(oImg, 10, 10);
var imgData = oGc.getImageData(10, 10, 200, 200),
data = imgData.data;
for( var i = 0; i < data.length; i += 4 ) {
data[i] = 255 - data[i];
data[i+1] = 255 - data[i+1];
data[i+2] = 255 - data[i+2];
}
//处理完之后，再次输出
oGc.putImageData( imgData, 220, 10 );
}
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
</body>
</html>
二、黑白效果（灰度图）
将彩色图片转换成黑白图片，原理：求r(data[i]), g(data[i+1]), b(data[i+2])三个通道的平均值，然后把这个平均值赋值给r, g, b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8' />
<style>
#canvas {
border: 1px dashed #aaa;
}
</style>
<script>
window.onload = function () {
var oCanvas = document.querySelector("#canvas"),
oGc = oCanvas.getContext('2d'); var oImg = new Image();
oImg.src = './img/mv.jpg';
oImg.onload = function () {
oGc.drawImage(oImg, 10, 10);
var imgData = oGc.getImageData(10, 10, 200, 200),
data = imgData.data, avg = 0;
for( var i = 0; i < data.length; i += 4 ) {
avg = ( data[i] + data[i+1] + data[i+2] ) / 3;
data[i] = avg;
data[i+1] = avg;
data[i+2] = avg;
}
//处理完之后，再次输出
oGc.putImageData( imgData, 220, 10 );
}
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
</body>
</html>
也可以分配rgb的灰度比例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8' />
<style>
#canvas {
border: 1px dashed #aaa;
}
</style>
<script>
window.onload = function () {
var oCanvas = document.querySelector("#canvas"),
oGc = oCanvas.getContext('2d'); var oImg = new Image();
oImg.src = './img/mv.jpg';
oImg.onload = function () {
oGc.drawImage(oImg, 10, 10);
var imgData = oGc.getImageData(10, 10, 200, 200),
data = imgData.data, avg = 0;
for( var i = 0; i < data.length; i += 4 ) {
avg = data[i] * 0.3 + data[i+1] * 0.3 + data[i+2] * 0.4;
data[i] = avg;
data[i+1] = avg;
data[i+2] = avg;
}
//处理完之后，再次输出
oGc.putImageData( imgData, 220, 10 );
}
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
</body>
</html>
三、调节亮度的强弱
在r、g、b、通道上加上一正值就是变亮，加上负值就是变暗
var oImg = new Image();
oImg.src = './img/mv.jpg';
oImg.onload = function () {
oGc.drawImage(oImg, 10, 10);
var imgData = oGc.getImageData(10, 10, 200, 200),
data = imgData.data, avg = 0;
for( var i = 0; i < data.length; i += 4 ) {
data[i] += 30;
data[i+1] += 50;
data[i+2] += 50;
}
//处理完之后，再次输出
oGc.putImageData( imgData, 220, 10 );
}
变暗：
四、复古效果
将r, g, b按比例混合相加。
var oImg = new Image();
oImg.src = './img/mv.jpg';
oImg.onload = function () {
oGc.drawImage(oImg, 10, 10);
var imgData = oGc.getImageData(10, 10, 200, 200),
data = imgData.data, avg = 0;
for( var i = 0; i < data.length; i += 4 ) {
r = data[i];
g = data[i+1];
b = data[i+2];
data[i] = r * 0.3 + g * 0.4 + b * 0.3;
data[i+1] = r * 0.2 + g * 0.6 + b * 0.2;
data[i+2] = r * 0.4 + g * 0.3 + b * 0.3;
}
//处理完之后，再次输出
oGc.putImageData( imgData, 220, 10 );
}
五、蓝色蒙版
蓝色 蒙版就是让图片偏蓝色，将蓝色通道赋值为 r, g, b三原色的平均值，把绿色，红色通道设置为0，其他蒙版效果，只要设置对应的通道平均值，关闭其他通道即可.
var oImg = new Image();
oImg.src = './img/mv.jpg';
oImg.onload = function () {
oGc.drawImage(oImg, 10, 10);
var imgData = oGc.getImageData(10, 10, 200, 200),
data = imgData.data, avg = 0;
for( var i = 0; i < data.length; i += 4 ) {
avg = ( data[i] + data[i+1] + data[i+2] / 3 );
data[i] = 0;
data[i+1] = 0;
data[i+2] = avg;
}
//处理完之后，再次输出
oGc.putImageData( imgData, 220, 10 );
}
六、透明度
这个很简单，只要把透明度乘以一个0~1之间的值即可。跟css的opacity一样
var oImg = new Image();
oImg.src = './img/mv.jpg';
oImg.onload = function () {
oGc.drawImage(oImg, 10, 10);
var imgData = oGc.getImageData(10, 10, 200, 200),
data = imgData.data, avg = 0;
for( var i = 0; i < data.length; i += 4 ) {
data[i+3] *= 0.2;
}
//处理完之后，再次输出
oGc.putImageData( imgData, 220, 10 );
}
七、createImageData：根据图片或者某个宽度与高度创建一个像素区域
cxt.createImageData( w, h )
cxt.createImageData( imgData )
w, h:创建区域的宽度与高度
imgData: 创建的区域与这个像素区域的宽度和高度相同，imgData就是通过getImageData获取到图片像素的 返回值
1，根据一个图片的宽度与高度，创建一个透明的红色像素区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8' />
<style>
#canvas {
border: 1px dashed #aaa;
}
</style>
<script>
window.onload = function () {
var oCanvas = document.querySelector("#canvas"),
oGc = oCanvas.getContext('2d'); var oImg = new Image();
oImg.src = './img/mv.jpg';
oImg.onload = function () {
oGc.drawImage(oImg, 10, 10);
var imgData = oGc.getImageData(10, 10, 200, 200),
data = imgData.data,
imgData2 = oGc.createImageData( imgData ),
data2 = imgData2.data;
for( var i = 0; i < imgData2.width * imgData2.height * 4; i += 4 ) {
data2[i] = 255;
data2[i+1] = 0;
data2[i+2] = 0;
data2[i+3] = 30;
}
//处理完之后，再次输出
oGc.putImageData( imgData2, 220, 10 );
}
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
</body>
</html>
2，自定一个200 x 200的蓝色透明像素区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8' />
<style>
#canvas {
border: 1px dashed #aaa;
}
</style>
<script>
window.onload = function () {
var oCanvas = document.querySelector("#canvas"),
oGc = oCanvas.getContext('2d'); var imgData = oGc.createImageData( 200, 200 ),
data = imgData.data;
for( var i = 0; i < imgData.width * imgData.height * 4 ; i += 4 ){
data[i] = 0;
data[i+1] = 0;
data[i+2] = 255;
data[i+3] = 100;
}
oGc.putImageData( imgData, 10, 10 );
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
</body>
</html>
[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)的更多相关文章
- [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)
接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...
- [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置
接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...
- [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)
本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...
- [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
- [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)
之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...
- [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)
绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...
- [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)
接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...
- [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...
- [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标
有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...
随机推荐
- 深入理解JVM（七）——性能监控工具
前言 工欲善其事必先利其器,性能优化和故障排查在我们大都数人眼里是件比较棘手的事情,一是需要具备一定的原理知识作为基础,二是需要掌握排查问题和解决问题的流程.方法.本文就将介绍利用性能监控工具,帮助开 ...
- Spark Structured streaming框架（1）之基本使用
Spark Struntured Streaming是Spark 2.1.0版本后新增加的流计算引擎,本博将通过几篇博文详细介绍这个框架.这篇是介绍Spark Structured Streamin ...
- C# 根据Excel模版导出文件
string fileName = Path.Combine(Application.StartupPath, "kfwh_yhxf.xls"); Microsoft.Office ...
- HTML的基本标签
整理一下这一周学习的一些知识. 首先是一些基本标签. <!DOCTYPE HTML><html> 文档类型声明: 让浏览器,按照html5的标准对代码进行解释与执行.文档类型声 ...
- 总结各种排序算法【Java实现】
一.插入类排序 1.直接插入排序 思想:将第i个插入到前i-1个中的适当位置 时间复杂度:T(n) = O(n²). 空间复杂度:S(n) = O(1). 稳定性:稳定排序. 如果碰见一个和插入元素相 ...
- 编辑sass报错：error style.scss (Line 3: Invalid GBK character "\xE5")解决办法
cmd.exe /D /C call C:/Ruby23-x64/bin/scss.bat --no-cache --update header.scss:header.css error heade ...
- SVN服务器搭建(一)
本教程以64位win10系统为例在本地搭建svn服务器,安装完成后,即可访问本地svn服务器上的项目,也可以访问网上其他svn服务器上的项目. 一.首先准备三个软件: 1．VisualSVN-Serv ...
- MPLS LDP随堂笔记1
LDP 的使用原因(对于不同协议来说) LDP的四大功能 发现邻居 hello 5s 15s 224.0.0.2 发现邻居关系 R1 UDP 646端口 R2 UDP 646端口 此时形成邻居 建立邻 ...
- 集美大学网络1413第十五次作业成绩（团队十） -- 项目复审与事后分析（Beta版本）
题目 团队作业10--项目复审与事后分析(Beta版本) 团队作业10成绩 --团队作业10-1 Beta事后诸葛亮 团队/分值 设想和目标 计划 资源 变更管理 设计/实现 测试/发布 团队的角色 ...
- 201521123082《Java程序设计》第2周学习总结
201521123082<Java程序设计>第2周学习总结 标签(空格分隔): Java 1.本周学习总结 巩固了类型转换的相关细节 初步认识了类和对象,使用Java撰写程序几乎都在使用对 ...