HTML5 Canvas实战
3.6 处理像素:图像反色
阅读(

路径和文本

图形及组合

处理图像和视频

绘制图像

裁剪图像

拷贝、粘贴画布的某部分

处理视频

获取图像数据

处理像素:图像反色

现在,我们知道如何访问图像数据,包括图像或视频的每一个像素的RGBA,下一步我们探索一下处理像素的可能性。本节,通过反转每个像素的颜色,来实现图像的反色处理。

图像反色
图3-7 图像反色

警告:由于getImageData()方法的安全限制,本节的例子必须在Web服务器上运行。

绘制步骤

按照以下步骤,实现图像的反色处理:

1. 定义画布上下文:

window.onload = function(){
  var canvas  = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");

2. 创建一个image对象,并把onload属性设置为一个绘制图像和获取图像数据的函数:

  var imageObj  = new Image();
  imageObj.onload  = function(){
    var sourceWidth  = this.width;
    var sourceHeight = this.height;
    var sourceX  = canvas.width  /  2  - sourceWidth  /  2;
    var sourceY  = canvas.height  /  2  - sourceHeight  /  2;
    var destX  = sourceX;
    var destY  = sourceY;
    context.drawImage(this, destX, destY);
    var imageData  = context.getImageData(sourceX, sourceY, sourceWidth, sourceHeight);
    var data  = imageData.data;

3. 循环处理图像的所有像素,并反转其颜色:

  for  (var i  =  0; i  < data.length; i  +=  4)  {
       data[i]  =  255  - data[i];              // red 红
       data[i  +  1]  =  255  - data[i  +  1];  // green 绿
       data[i  +  2]  =  255  - data[i  +  2];  // blue蓝
       // i+3 is alpha  (the fourth element) i+3是透明度(第四个元素)
   }

4. 使用处理后的图像覆盖源图像,然后在onload 定义的外面,设置图像的源地址:

    //使用新图像的数据覆盖源图像
    context.putImageData(imageData, destX, destY);
  };
  imageObj.src  = "jet_300x214.jpg";
};

5. 在HTML文档的body部分嵌入canvas标签:

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

工作原理

要使用HTML5的画布对图像进行反色处理,可以简单地循环处理图像的所有像素,再使用颜色反转算法反转每一个像素的颜色。不必担心,这比听起来简单多了。要反转一个像素的颜色,只需用255减去该像素的每一个RGB分量即可,代码如下:

data[i] = 255 - data[i]; // red

data[i+1] = 255 - data[i+1]; // green

data[i+2] = 255 - data[i+2]; // blue

像素被更新完成后,我们可以调用画布上下文对象的putImageData()方法来重绘图像:

context.putImageData(imageData, destX, destY);

从根本上说,该方法允许我们使用图像数据,而不是使用drawImage()方法的源图像来绘制图像。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验