|
到这里，基本能够清除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属性，未深究，此处不展开以防误导读者。
五、写在后面
水平有限，如有疏误，敬请指出
（编辑：焦作站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
