HTML5教程 Canvas像素处理使用接口浅析
沉沙 2018-06-26 来源 : 阅读 1258 评论 0

摘要:本文通过简单的代码实例,展示了canvas在图像像素数据操作方面的常用接口。希望阅读本篇文章以后大家有所收获,帮助大家对HTML5的理解更加深入。

本文通过简单的代码实例,展示了canvas在图像像素数据操作方面的常用接口。

一、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的说明,应该不难理解四个参数所代表的含义 
 

代码如下:

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); 
}); 
}


到这里,基本能够清除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的一点补充 


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 + '']


本文由职坐标整理发布,学习更多的HTML5/CSS3相关知识,请关注职坐标WEB前端HTML5/CSS3频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程