HTML5 Canvas像素处理使用接口介绍

内容概要：本文通过简单的代码实例，以及略猥琐的图片demo，展示了canvas在图像像素数据操作方面的常用接口。至于如何利用这几个接口实现更复杂的效果，则会在后续章节里继续讲述。

一、canvas图片填充； 2、设置/获取canvas图片数据； 3、创建canvas图片数据；4、关于imagedata.data的一点补充； 5、写在后面


一、canvas图片填充

复制代码 代码如下:

/**

* @description

* @param {number} x 图像起始绘制点距离canvas最左侧的距离

* @param {number} y 图像起始绘制点距离canvas最顶部的距离

* @param {number} width 最终图像在canvas上绘制出来的宽度

* @param {number} height 最终图像在canvas上绘制出来的高度

*/

context.drawimage(image, x, y, width, height)

demo_01如下：

<canvas id=”draw_image_canvas” style=”background:#ccc;”></canvas>

复制代码 代码如下:

function $(id) { return document.getelementbyid(id); }

function getimage(url, callback){

var img = document.createelement(‘img’);

img.onload = function(){

callback && callback(this);

};

img.src = url;

document.body.appendchild(img);

}

function drawimage(){

var url = ‘xiangjishi.png’;

var canvas = $(‘draw_image_canvas’);

var context = canvas.getcontext(‘2d’);

getimage(url, function(img){

canvas.width = img.width;

canvas.height = img.height;

var offtx = 20;

var offty = 20;

var drawwidth = img.width/4;

var drawheight = img.height/4;

context.drawimage(img, offtx, offty, drawwidth, drawheight);

});

}

drawimage();

demo说明：加载xiangjishi.png，加载完成后，从相对于画布左上角坐标(0, 0)处开始，将xiangjishi.png绘制在画布上，效果如下：

看到这里，可能对于 context.drawimage(image, x, y, width, height) 里四个参数的含义理解还不是特别清楚，可以简单把几个参数修改下看看效果：

复制代码 代码如下:

var offtx = 20;

var offty = 20;

var drawwidth = img.width/2;

var drawheight = img.height/2;

context.drawimage(img, offtx, offty, drawwidth, drawheight);

修改后的demo效果如下，结合上面api的说明，应该不难理解四个参数所代表的含义

复制代码 代码如下:

context.drawimage(image, x, y, width, height)

二、获取/设置canvas图片数据

复制代码 代码如下:

/**

* @description 获取canvas特定区域的像素点信息

* @param {number} x 获取信息的起始点距离canvas最左侧的距离

* @param {number} y 获取信息的起始距离canvas最顶部的距离

* @param {number} width 获取的宽度

* @param {number} height 最终的高度

*/

context.getimagedata(x, y, width, height)

该方法返回一个imagedata对象，该对象主要有三个属性：

imagedata.width：每行有多少个元素

imagedata.height：每列有多少个元素

imagedata.data：一维数组，存储了从canvas中获取的每个像素的rgba值。该数组为每个像素点保存了四个值——红、绿、蓝和alpha透明度。每个值都在0～255之间。因此，canvas上的每个像素在这个数组中就变成了四个整数值。数组的填充顺序从左到右，从上到下。

复制代码 代码如下:

/**

* @description 用特定的imagedata设置canvas特定区域的像素信息

* @param {number} x 从canvas的x点处开始设置

* @param {number} y 从canvas的y点处开始设置

* @param {number} width 获取的宽度

* @param {number} height 最终的高度

*/

context.putimagedata(imagedata, x, y)

下面结合demo_2来说明getimagedata()的用法以及各自参数的对应的含义

demo_02 源代码如下，在demo_01的基础上稍事修改：

复制代码 代码如下:

<canvas id=”draw_image_canvas” style=”background:#ccc;”></canvas>

<canvas id=”get_image_canvas” style=”backg哈尔滨广厦学院round:#ccc;”></canvas>

复制代码 代码如下:

function getandtimagedata(){

var url = ‘xiangjishi.png’;

getimage(url, function(img){

$(‘draw_image_canvas’).width = img.width;

$(‘draw_image_canvas’).height = img.height;

var context = 民诉法司法解释$(‘draw_image_canvas’).getcontext(‘2d’);

context.drawimage(img, 0, 0, img.width, img.height);

//获取像素信息

var offtx = img.width/2;

var offty = img.he口号征集ight/2;

var getimgwidth = img.width/2;

var getimgheight = img.height/2;

var imgagedata = context.getimagedata(offtx, offty, getimgwidth, getimgheight);

//设置像素信息，此处先忽略具体代码，知道是把上面获取的像素信息原封不动放到另一canvas里即可

var startx = 0;

var starty = 0;

var ct = $(‘get_image_canvas’).getcontext(‘2d’);

$(‘get_image_canvas’).width = img.width;

$(‘get_image_canvas’).height = img.height;

ct.putimagedata(imgagedata, startx, starty);

});

}

demo_2 展示效果如下：

到这里，基本能够清除getimagedata方法四个参数对应的含义。putimagedata参数的理解也不难，demo_2的代码略加修改后看下效果就知道了

复制代码 代码如下:

function getandtimagedata(){

var url = ‘xiangjishi.png’;

getimage(url, function(img){

$(‘draw_image_canvas’).width = img.width;

$(‘draw_image_canvas’).height = img.height;

var context 病句大全= $(前恭后倨‘draw_image_canvas’).getcontext(‘2d’);

context.drawimage(img, 0, 0, img.width, img.height);

//获取像素信息

var offtx = img.width/2;

var offty = img.height/2;

var getimgwidth = img.width/2;

var getimgheight = img.height/2;

var imgagedata = context.getimagedata(offtx, offty, getimgwidth, getimgheight);

//设置像素信息

var startx = img.width/2; //这里原先为0

var starty = img.width/2; //这里原先为0

var ct = $(‘get_image_canvas’).getcontext(‘2d’);

$(‘get_image_canvas’).width = img.width;

$(‘get_image_canvas’).height = img.height;

ct.putimagedata(imgagedata, startx, starty);

});

}

demo_3展示效果如下，可是试着把几个参数自己改一下试下，可能会有更好的理解：

三、创建canvas图片数据

复制代码 代码如下:

/**

* @description 预先创建一组图像数据，并绑定在canvas对象上

* @param {number} width 创建的宽度

* @param {number} height 创建的高度

*/

context.createimagedata(width, height)

接口比较简单，创建的数据可以像用getimagedata获取到的数据那样进行同样的处理，这里仅需要注意的是：这组图像数据不一定会反映canvas的当前状态。


四、关于imagedata的一点补充

再《html5高级程序设计》以及很多文章里面，都把imagedata.data当作一个数组来讲，但其实：

复制代码 代码如下:

imagedata.data返回的并不是真正的数组，而是一个类数组的对象，可以将imagedata.data的类型打印出来

console.log(object.prototype.tostring.call(imgagedata.data)); //输出：[object uint8clampedarray]

然后再将imagedata.data的具体内容打印出来，内容较长，仅截取最前面以及最后面的一段，可以看出：

imagedata.data其实是一个对象，其索引从0开始，一直到width*height*4-1。

为什么不直接用数组存放？因为数组的长度有个上限，假设为limitlength，超过limitlength的元素，均以键值的方式存储，如 data[limitlength + 100] 其实是 data[‘limitlength + 100 + ”]（limitlength具体值记不得了，有兴趣的童鞋可以查下）
至于最后面的bytelength、byteofft、buffer属性，未深究，此处不展开以防误导读者。
五、写在后面
水平有限，如有疏误，敬请指出