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


Posted in HTML / CSS onDecember 02, 2012

内容概要:本文通过简单的代码实例,以及略猥琐的图片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绘制在画布上,效果如下:
HTML5 Canvas像素处理使用接口介绍
看到这里,可能对于 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的说明,应该不难理解四个参数所代表的含义
HTML5 Canvas像素处理使用接口介绍 
复制代码
代码如下:

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 展示效果如下

HTML5 Canvas像素处理使用接口介绍 
到这里,基本能够清除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展示效果如下,可是试着把几个参数自己改一下试下,可能会有更好的理解:

HTML5 Canvas像素处理使用接口介绍 
三、创建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。

HTML5 Canvas像素处理使用接口介绍
为什么不直接用数组存放?因为数组的长度有个上限,假设为limitLength,超过limitLength的元素,均以键值的方式存储,如 data[limitLength + 100] 其实是 data['limitLength + 100 + ''](limitLength具体值记不得了,有兴趣的童鞋可以查下)
至于最后面的byteLength、byteOffset、buffer属性,未深究,此处不展开以防误导读者。
五、写在后面
水平有限,如有疏误,敬请指出

HTML / CSS 相关文章推荐
使用CSS3实现字体颜色渐变的实现
Mar 09 HTML / CSS
Web前端绘制0.5像素的几种方法
Aug 11 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
HTML页面中添加Canvas标签示例
Jan 01 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
Nov 10 HTML / CSS
使用CSS连接数据库的方式
Feb 28 HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
May 25 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 #HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 #HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 #HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
Nov 14 #HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 #HTML / CSS
Bootstrap 学习分享
Nov 12 #HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 #HTML / CSS
You might like
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
简单的通用表达式求10乘阶示例
2014/03/03 Python
python中pygame模块用法实例
2014/10/09 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
Python中的self用法详解
2019/08/06 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
资深财务管理人员自我评价
2013/09/22 职场文书
办公室内勤工作职责
2013/12/11 职场文书
数学高效课堂实施方案
2014/03/29 职场文书
离婚起诉状范本
2015/05/19 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书