接着上文[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 );

 }

变暗：

data[i] -= 30;
data[i+1] -= 50;
data[i+2] -= 50;

四、复古效果

将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系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)的更多相关文章

  1. [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

    接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...

  2. [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置

    接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...

  3. [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

    本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...

  4. [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

    我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...

  5. [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

    之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...

  6. [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)

    绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...

  7. [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)

    接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...

  8. [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)

    上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...

  9. [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标

    有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...

随机推荐

  1. 卸载oracle 11g数据库

    完全卸载oracle11g步骤:1. 开始->设置->控制面板->管理工具->服务 停止所有Oracle服务.2. 开始->程序->oracle - OraHome ...

  2. 【pac4j】OAuth 认证机制 入门篇

    1,pac4j是什么? pac4j是一个支持多种支持多种协议的身份认证的Java客户端. 2,pac4j的12种客户端认证机制:目前我只有用过第一和第八种. OAuth (1.0 & 2.0) ...

  3. jmeter系列-------注意事项

    1.自己创建的数据自己擅长,不要留垃圾数据 2.每个接口都需要增加断言,保证脚本的结果的正确性 3.相同的应用放在一个简单控制器下,所有的应用尽量放在一个线程组下面,将特殊场景单独抽离成一个线程组 4 ...

  4. SQL菜鸟学习札记（二）

    五月份一直在写SQL,之后写了一个期末大作业的项目,现在才有时间把之前遇到的各种奇怪的问题整理出来.下一部分札记应该是大作业中使用到的SQL的整理. 一.UPDATE SET语句后面可以并列赋值. 之 ...

  5. 使用TCP/IP Monitor监视Soap协议

    什么是soap? soap,简单对象访问协议,基于http传输xml数据,soap协议体是xml格式. SOAP 是一种网络通信协议 SOAP即Simple Object Access Protoco ...

  6. setTimeout和setInterval不容易注意到的一些细节

    今天没事翻了翻JS高程,看到了setTimeout部分有这么一句话:调用setTimeout()之后,该方法会返回一个数值ID,表示超时调用.这个超时调用ID是计划执行代码的唯一标识符,可以通过它来取 ...

  7. java多线程设计模式

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt220 java多线程设计模式 java语言已经内置了多线程支持,所有实现Ru ...

  8. java8 去掉 perm 用 Metaspace 来替代

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt266 正如大家所知,JDK 8 Early Access版已经提供下载.这使 ...

  9. 01-TypeScript概述

    本篇文章向大家介绍新的TypeScript客户端脚本语言,主要涉及两个方面,一是传统JavaScript语言的弱点,二是TypeScript语言的优势. 一.JavaScript的弱点 1.弱类型,缺 ...

  10. C# 反向生成工具（DAL BLL Modle）

    VS2015  ADO.NET无果后果断~! 动软生成:http://pan.baidu.com/s/1gfIf0ZL