`

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 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属性,未深究,此处不展开以防误导读者。 
五、写在后面 
水平有限,如有疏误,敬请指出

分享到:
评论

相关推荐

    HTML5Canvas像素处理常用接口

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

    HTML5 Canvas 2D API规范中文版pdf HTML5教程

    一本涉及高级内容应用的HTML5教程,HTML5 Canvas_2D API规范1.0中文版,Canvas在HTML5有着重要意义,可以说是HTML5强大功能亮点的体现,本教程可看作是一本HTML5的Canvas API手册,包括了CANVAS接口元素定义、...

    HTML5 Canvas 2D API 规范 1.0 中文版

    Canvas 2D API 规范 1.0 中文版闪亮登场,相信是您学习HTML5的canvas元素api的首选教材,里面有丰富的例子,并且均在IE9下成功测试。希望大家多多支持。 下面是目录: 摘要 2 1 介绍 2 1.1 术语: 2 2 CANVAS接口...

    利用html5 canvas破解简单验证码及getImageData接口应用

    敝校的教务管理系统(貌似不止我们学校用呢),一到... 说下思路:HTML 5中的canvas有个接口getImageData可以用来从验证码图像中取得像素数据。每一个像素有对应r,g,b,a四个值,r,g,b是红绿蓝三色,a是透明度。 观察

    Ah52_html5_WEB曲线_Transformations_

    一本涉及高级内容应用的HTML5教程,HTML5 Canvas_2D API规范1.0中文版,Canvas在HTML5有着重要意义,可以说是HTML5强大功能亮点的体现,本教程可看作是一本HTML5的Canvas API手册,包括了CANVAS接口元素定义、...

    HTML5 2DCanvas API.pdf

    一本涉及高级内容应用的HTML5教程,HTML5 Canvas_2D API规范1.0中文版,Canvas在HTML5有着重要意义,可以说是HTML5强大功能亮点的体现,本教程可看作是一本HTML5的Canvas API手册,包括了CANVAS接口元素定义、...

    从入门到精通HTML5——PDF——网盘链接

     15.1.2 使用blob接口获取文件的类型与大小 282  15.1.3 通过类型过滤选择的文件 283  15.2 使用FileReader接口读取文件 285  15.2.1 检测浏览器是否支持FileReader接口 285  15.2.2 FileReader接口的方法 ...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    鉴于市场上用户的手机型号、种类、屏幕分辨率等参差不齐,传统方式根据主流系统分别开发相应的系统耗时又耗力,为了高效开发并节约开发项目成本,本文采用Android+HTML5相结合的方式进行移动端Web系统的设计研发工作...

    Apress.Pro.WPF.in.C.Sharp.2008.2nd.Edition.Feb.2008

    4.5 使用Canvas面板进行 基于坐标的布局 89 4.5.1 Z顺序 90 4.5.2 lnkCanvas元素 91 4.6 布局示例 93 4.6.1 列设置 93 4.6.2 动态内容 94 4.6.3 组合式用户界面 96 4.7 结束语 97 第5章 内容 99 5.1 理解内容控件 ...

    Silverlight2.0功能展示Demo源码

    UseLayoutRounding - 是否使用完整像素布局 Cursor - 鼠标移动到 FrameworkElement 上面时,鼠标指针的样式 Margin - 容器边缘与边缘之外的空白距离(像素值:上下左右;左右,上下;左,上,右,下) Tag - 保存一些...

    flex3的cookbook书籍完整版dpf(包含目录)

    使用ColorPicker设置Canvas颜色 2.4节. 使用SWFLoader载入SWF 2.5节. 设置组件的标签索引 2.6节. 设置控件的labelFunction 2.7节. 提供菜单数据 2.8. 动态填充菜单 2.9节. 为菜单类控件创建事件处理函数 2.10节. ...

    delphi 开发经验技巧宝典源码

    第5章 字符与字符串处理技术 99 5.1 ASCII码与编码转换 100 0150 如何获得汉字的区位码 100 0151 通过区位码获取汉字 100 0152 根据ASCII码获得字母 101 0153 获得字母的ASCII码 101 5.2 字符中的转换...

    delphi 开发经验技巧宝典源码06

    第5章 字符与字符串处理技术 99 5.1 ASCII码与编码转换 100 0150 如何获得汉字的区位码 100 0151 通过区位码获取汉字 100 0152 根据ASCII码获得字母 101 0153 获得字母的ASCII码 101 5.2 字符中的转换...

Global site tag (gtag.js) - Google Analytics