canvas getImageData()

2018-9-13 11:11| 作者: admin| 查看: 1839| 评论: 0|来自: 蚂蚁部落

此方法可以返回一个ImageData对象,该对象包含画布指定矩形区域的像素数据。

语法结构:

[JavaScript] 纯文本查看 复制代码
var imgData=context.getImageData(x,y,width,height);

参数解析:

(1).x:必需,开始复制的左上角位置的 x 坐标。

(2).y:必需,开始复制的左上角位置的 y 坐标。

(3).width:必需,将要复制的矩形区域的宽度。

(4).height:必需,将要复制的矩形区域的高度。

返回的ImageData对象的结构如下:

[JavaScript] 纯文本查看 复制代码
ImageData { width=10, height=10, data=Uint8ClampedArray}

width和height就是获取矩形区域的尺寸。

data是一个数组,它包含了每一个像素的信息;每一个像素具有RGBA值:

(1).R - 红色 (0-255)

(2).G - 绿色 (0-255)

(3).B - 蓝色 (0-255)

(4).A - alpha 通道 (0-255; 0 是透明的,255 是完全可见的)

data中又是如何存储像素数组的呢,最符合常理的情况是,data是一个二维数组,它的每一个数组元素包含一个像素的信息,然而事实并非如此,data的元素始终依次是red,green,blue,alpha,red,green,blue,alpha一直这样重复下去,直到结束。

第一个像素的数据具体如下:

[JavaScript] 纯文本查看 复制代码
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];

那么第二个像素的数据就是这样的:

[JavaScript] 纯文本查看 复制代码
red=imgData.data[4];
green=imgData.data[5];
blue=imgData.data[6];
alpha=imgData.data[7];

data数组的大小由像素个数决定,ImageData的width*height.如getImageData(1,1,1,1),那data就只有一个像素信息;而getImageData(1,1,10,10),则有10*10=100个。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
  margin: 5px;
}
</style>
<script>
window.onload = function () {
  var cvs = document.getElementById("canvas");
  var obt = document.getElementById("bt");
  var ctx = cvs.getContext("2d");
  ctx.fillStyle = "green";
  ctx.fillRect(10, 10, 50, 50);
  function copy() {
    var imgData = ctx.getImageData(10, 10, 50, 50);
    ctx.putImageData(imgData, 10, 70);
  }
  obt.onclick = function () {
    copy();
  }
}
</script>
</head>
<body>
<canvas id="canvas" width="300" height="150"></canvas><br/>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

上面的代码实现了图像的拷贝功能,下面再看一个更加复杂一点的。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
}
</style>
<script>
window.onload = function () {
  var cvs = document.getElementById("canvas");
  var img = document.getElementById("ant");
  var obt = document.getElementById("bt");
  var ctx = cvs.getContext("2d");
  obt.onclick = function () {
    ctx.drawImage(img, 0, 0);
    var imgData = ctx.getImageData(0, 0, cvs.width, cvs.height);
    // 反转颜色
    for (var index = 0; index < imgData.data.length; index += 4) {
      imgData.data[index] = 255 - imgData.data[index];
      imgData.data[index+ 1] = 255 - imgData.data[index+ 1];
      imgData.data[index+ 2] = 255 - imgData.data[index+ 2];
      imgData.data[index+ 3] = 255;
    }
    ctx.putImageData(imgData, 0, 0);
  }
}
</script>
</head>
<body>
<img id="ant" src="mytest/demo/cite.jpg"><br/>
<canvas id="canvas" width="738" height="280"></canvas><br/>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

上面的代码实现了图片的反色效果。


鲜花

握手

雷人

路过

鸡蛋
返回顶部