一 图片预览
HTML5给web开发带来很多好东西,可以说,它将开创新一代web开发。
其中canvas就是它带来的东西之一,canvas非常强大,可以做到很多东西,不过我觉得学习canvas几乎等于在学习一种独立的技术了。这里只是展示一个简单的canvas效果。如下图:
二 原理介绍
我在代码中通过ctx.getImageData(0,0,width,height);获取canvas里面的imagedata对象,而这个对象就是这个效果实现的关键。
我们可以通过imagedata.data来获取一个数组,这个数组的length是canvas像素数量的四倍,其中每四个项代表一个像素。在每四个项里,他们一次代表rgba,rgb就很明显了,而a就代表透明,当a为255的时候完全不透明,当a为0的时候就是透明的。而这次的效果无需用到透明,所以没对这个进行操作。
最后我通过ctx.putImageData(imageData,0,0);把处理过的Imagedata放回去。请注意看代码以及注释。
注:下面那个img的src值是我本机的,因为将外链的图片添加到canvas里面的话会引发Security错误,所以在demo里面我把图片转化为DataURL来使用的。
三 代码以及demo
window.onload
=
function
() {
var photo = document.getElementById( " photo " );
photo.onload = function (){ // 把图像处理函数添加为目标图片的onload时间,因为只有图片已经加载,才能用canvas对其进行操作
var cav = document.getElementById( " cav " ); // 获取canvas对象
var ctx = cav.getContext( " 2d " ); // 通过这个函数获取canvas的上下文
var width = parseInt(cav.getAttribute( " width " ));
var height = parseInt(cav.getAttribute( " height " ));
ctx.drawImage( this , 0 , 0 ); // 将图片“画到”canvas上去
var imageData = ctx.getImageData( 0 , 0 ,width,height); // 取得canvas的imageData,我们就是通过这个对canvas进行像素操作的
var data = imageData.data;
for ( var i = 0 ,length = data.length;i < length;i = i + 4 ) // data里面每4个数据项代表一个像素
{
data[i] = 255 - data[i]; // 红
data[i + 1 ] = 255 - data[i + 1 ]; // 绿
data[i + 2 ] = 255 - data[i + 2 ]; // 蓝
}
ctx.putImageData(imageData, 0 , 0 ); // 把imageData再放回canvas
}
photo.src = " canvas-women.jpg " ;
}
var photo = document.getElementById( " photo " );
photo.onload = function (){ // 把图像处理函数添加为目标图片的onload时间,因为只有图片已经加载,才能用canvas对其进行操作
var cav = document.getElementById( " cav " ); // 获取canvas对象
var ctx = cav.getContext( " 2d " ); // 通过这个函数获取canvas的上下文
var width = parseInt(cav.getAttribute( " width " ));
var height = parseInt(cav.getAttribute( " height " ));
ctx.drawImage( this , 0 , 0 ); // 将图片“画到”canvas上去
var imageData = ctx.getImageData( 0 , 0 ,width,height); // 取得canvas的imageData,我们就是通过这个对canvas进行像素操作的
var data = imageData.data;
for ( var i = 0 ,length = data.length;i < length;i = i + 4 ) // data里面每4个数据项代表一个像素
{
data[i] = 255 - data[i]; // 红
data[i + 1 ] = 255 - data[i + 1 ]; // 绿
data[i + 2 ] = 255 - data[i + 2 ]; // 蓝
}
ctx.putImageData(imageData, 0 , 0 ); // 把imageData再放回canvas
}
photo.src = " canvas-women.jpg " ;
}
Pola的实验室
- 此页面展示了canvas的像素控制入门效果
- 此效果只在支持canvas标签的浏览器上显示
- 注:没用excanvas.js来支持IE下的canvas是因为这个文件太大,如果要的话只要把excanvas.js添加进去就行,不过和原生的canvas有一点点差异