HTML5 Canvas实战
3.5 获取图像数据
阅读(

路径和文本

图形及组合

处理图像和视频

绘制图像

裁剪图像

拷贝、粘贴画布的某部分

处理视频

获取图像数据

现在,我们知道如何绘制图像和视频,让我们尝试去访问图像的数据,看看什么类型的属性我们可以操作。

获取图像数据
图3-6 获取图像数据

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

准备工作

在开始处理图像数据之前,很重要是要了解一下画布的安全和RGBA颜色空间。

那么,在访问图像数据方面,为什么画布安全很重要?简言之,为了访问图像数据,需要使用画布上下文对象的getImateData()方法,如果我们试图访问非Web服务器的文件系统、或不同域下的图像数据,该方法就会抛出SECURITY_ERR异常。换句话说,如果你想在本地文件系统中尝试运行这些例子,这恐怕不行。同样,本章后面各节的例子,也需要在Web服务器上运行。

其次,由于像素处理全部是通过改变一个像素的RGB来实现的,我们应该了解一下RGB颜色模式和RGBA颜色空间。RGB代表一个像素点的红(red)、绿(green)、蓝(blue)三种颜色的分量,每个分量取0到255之间的值,其中,0代表无色,255代表全色。RGB值通常以下面形式表示:

rgb(red,green,blue)

这里是使用RGB颜色模式表示时的一些常用颜色值:

rgb(0,0,0) = black

rgb(255,255,255) = white

rgb(255,0,0) = red

rgb(0,255,0) = green

rgb(0,0,255) = blue

rgb(255,255,0) = yellow

rgb(255,0,255) = magenta

rgb(0,255,255) = cyan

除了RGB,像素还有一个代表其透明度的透明通道。透明通道取值为0代表完全透明,取值为255代表完全不透明。RGBA颜色空间仅仅是指加入了透明通道(A)RGB颜色模式。

请当心,不要把HTML5画布的透明通道和CSS中的透明通道搞混。HTML5画布中,透明通道为整数,取值范围是0到255;CSS中,透明通道为小数,取值范围0.0到1.0。

绘制步骤

按照以下步骤,输出一幅图像的数据属性:

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 destX  = canvas.width  /  2  - sourceWidth  /  2;
      var destY  = canvas.height  /  2  - sourceHeight  /  2;
      var sourceX = destX;
      var sourceY = destY;
      // draw image on canvas
      context.drawImage(this, destX, destY);

3. 获取图像数据,输出其属性,然后在onload定义的外面设置image对象的源地址:

  //从画布上包含图像的矩形区域中获取图像数据
    var imageData = context.getImageData(sourceX, sourceY, sourceWidth, sourceHeight);
    var data  = imageData.data;
    //把图像数据相关的属性输出到屏幕上
    var str  = "width="  + imageData.width  + ", height="  + imageData.height  + ", data length="  + data.length;
    context.font = "12pt Calibri";
    context.fillText(str,  4,  14);
  };
  imageObj.src  = "jet_300x214.jpg";
};

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

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

工作原理

本节背后的思想是,绘制图像,并获取图像数据,然后把图像数据相关的属性输出到屏幕上。从前面的代码可以看到,我们可以调用画布上下文对象的getImageData()方法来获取图像数据:

context.getImageData(sourceX,sourceY,sourceWidth,sourceHeight);

请注意,getImageData()方法只能被画布上下文对象调用,而不能被image对象调用。因此,为了获取图像数据,我们必须先在画布中绘制一幅图像,再调用画布上下文对象的getImageData()方法。

ImageData对象有三个属性:width, height, 和data。从本节开始时的截屏可以看到,ImageData对象包含一个width属性,其值为300,一个height属性,其值为214,一个data属性,其值是一个像素信息的数组,本例中该数组有256,800个元素。说实话,ImageData对象的关键,就是data属性。data属性包含图像中每一个像素的RGBA信息。因为我们的图像是由300 * 214 = 64,200个像素组成,所以数组的元素个数就是4 * 64,200 = 256,800。

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验