HTML5 Canvas像素解决应用插口详细介绍

日期:2021-02-26 类型:科技新闻 

关键词:h5小游戏,h5如何制作,免费h5在线制作,h5页面在线制作,测一测h5

內容概述:本文根据简易的编码案例,和略猥亵的照片demo,展现了canvas在图象像素数据信息实际操作层面的常见插口。至于怎样运用这几个插口完成更繁杂的实际效果,则会在后续章节里再次讲述。
1、canvas照片填充; 2、设定/获得canvas照片数据信息; 3、建立canvas照片数据信息;4、有关imageData.data的1点填补; 5、写在后边
1、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) 里4个主要参数的含意了解还并不是非常清晰,能够简易把几个主要参数改动下看看实际效果:

拷贝编码
编码以下:

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的表明,应当不难了解4个主要参数所意味着的含意
 

拷贝编码
编码以下:

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

2、获得/设定canvas照片数据信息

拷贝编码
编码以下:

/**
* @description 获得canvas特殊地区的像素点信息内容
* @param {Number} x 获得信息内容的起止点间距canvas最左边的间距
* @param {Number} y 获得信息内容的起止间距canvas最顶部的间距
* @param {Number} width 获得的宽度
* @param {Number} height 最后的高宽比
*/
context.getImageData(x, y, width, height)

该方式回到1个ImageData目标,该目标关键有3个特性:
imageData.width:每行有是多少个元素
imageData.height:每列有是多少个元素
imageData.data:1维数字能量数组,储存了从canvas中获得的每一个像素的RGBA值。该数字能量数组为每一个像素点储存了4个值——红、绿、蓝和alpha全透明度。每一个值都在0~255之间。因而,canvas上的每一个像素在这个数字能量数组中就变为了4个整数金额值。数字能量数组的填充次序从左到右,从上到下。

拷贝编码
编码以下:

/**
* @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方式4个主要参数对应的含意。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展现实际效果以下,但是试着把几个主要参数自身改1下试下,将会会有更好的了解:

 
3、建立canvas照片数据信息

拷贝编码
编码以下:

/**
* @description 预先建立1组图象数据信息,并关联在canvas目标上
* @param {Number} width 建立的宽度
* @param {Number} height 建立的高宽比
*/
context.createImageData(width, height)

插口较为简易,建立的数据信息能够像用getImageData获得到的数据信息那样开展一样的解决,这里仅必须留意的是:这组图象数据信息不1定会反应canvas确当前情况。
4、有关imageData的1点填补
再《HTML5高級程序流程设计方案》和许多文章内容里边,都把imageData.data作为1个数字能量数组来说,但实际上:

拷贝编码
编码以下:

imageData.data回到的其实不是真实的数字能量数组,而是1个类数字能量数组的目标,能够将imageData.data的种类复印出来
console.log(Object.prototype.toString.call(imgageData.data)); //輸出:[object Uint8ClampedArray]

随后再将imageData.data的实际內容复印出来,內容较长,仅截取最前面和最终面的1段,能够看出:
imageData.data实际上是1个目标,其数据库索引从0刚开始,1直至width*height*4⑴。


为何不立即用数字能量数组储放?由于数字能量数组的长度有个上限,假定为limitLength,超出limitLength的元素,均以键值的方法储存,如 data[limitLength + 100] 实际上是 data['limitLength + 100 + ''](limitLength实际值记不可了,有兴趣爱好的童鞋能够查下)
至于最终面的byteLength、byteOffset、buffer特性,未深究,此处不进行防止误导读者。
5、写在后边
水平比较有限,如有疏误,敬请指出