HTML5 Canvas像素处理使用接口介绍
程序员文章站
2023-12-12 14:15:59
本文通过简单的代码实例,以及略猥琐的图片demo,展示了canvas在图像像素数据操作方面的常用接口,有需求的朋友可以参考下... 12-12-02...
内容概要:本文通过简单的代码实例,以及略猥琐的图片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 offsetx = 20;
var offsety = 20;
var drawwidth = img.width/4;
var drawheight = img.height/4;
context.drawimage(img, offsetx, offsety, drawwidth, drawheight);
});
}
drawimage();
demo说明:加载xiangjishi.png,加载完成后,从相对于画布左上角坐标(0, 0)处开始,将xiangjishi.png绘制在画布上,效果如下:
看到这里,可能对于 context.drawimage(image, x, y, width, height) 里四个参数的含义理解还不是特别清楚,可以简单把几个参数修改下看看效果:
var offsetx = 20;
var offsety = 20;
var drawwidth = img.width/2;
var drawheight = img.height/2;
context.drawimage(img, offsetx, offsety, 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="background:#ccc;"></canvas>
function getandsetimagedata(){
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 offsetx = img.width/2;
var offsety = img.height/2;
var getimgwidth = img.width/2;
var getimgheight = img.height/2;
var imgagedata = context.getimagedata(offsetx, offsety, 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 展示效果如下:
function getandsetimagedata(){
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 offsetx = img.width/2;
var offsety = img.height/2;
var getimgwidth = img.width/2;
var getimgheight = img.height/2;
var imgagedata = context.getimagedata(offsetx, offsety, 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展示效果如下,可是试着把几个参数自己改一下试下,可能会有更好的理解:
/**
* @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。
一、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 offsetx = 20;
var offsety = 20;
var drawwidth = img.width/4;
var drawheight = img.height/4;
context.drawimage(img, offsetx, offsety, drawwidth, drawheight);
});
}
drawimage();
demo说明:加载xiangjishi.png,加载完成后,从相对于画布左上角坐标(0, 0)处开始,将xiangjishi.png绘制在画布上,效果如下:
看到这里,可能对于 context.drawimage(image, x, y, width, height) 里四个参数的含义理解还不是特别清楚,可以简单把几个参数修改下看看效果:
复制代码
代码如下:var offsetx = 20;
var offsety = 20;
var drawwidth = img.width/2;
var drawheight = img.height/2;
context.drawimage(img, offsetx, offsety, 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="background:#ccc;"></canvas>
复制代码
代码如下:function getandsetimagedata(){
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 offsetx = img.width/2;
var offsety = img.height/2;
var getimgwidth = img.width/2;
var getimgheight = img.height/2;
var imgagedata = context.getimagedata(offsetx, offsety, 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 getandsetimagedata(){
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 offsetx = img.width/2;
var offsety = img.height/2;
var getimgwidth = img.width/2;
var getimgheight = img.height/2;
var imgagedata = context.getimagedata(offsetx, offsety, 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、byteoffset、buffer属性,未深究,此处不展开以防误导读者。
五、写在后面
水平有限,如有疏误,敬请指出