html5 解析图片

一 图片预览
HTML5给web开发带来很多好东西,可以说,它将开创新一代web开发。
其中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放回去。请注意看代码以及注释。

  1. window.onload = function() {

  2.      

  3.        

  4.        var photo=document.getElementById("photo");

  5.        photo.onload=function(){//把图像处理函数添加为目标图片的onload时间,因为只有图片已经加载,才能用canvas对其进行操作

  6.         var cav=document.getElementById("cav");//获取canvas对象

  7.        var ctx=cav.getContext("2d");//通过这个函数获取canvas的上下文

  8.        

  9.        var width=parseInt(cav.getAttribute("width"));

  10.        var height=parseInt(cav.getAttribute("height"));

  11.        ctx.drawImage(this,0,0);//将图片“画到”canvas上去

  12.        

  13.        var imageData=ctx.getImageData(0,0,width,height);//取得canvas的imageData,我们就是通过这个对canvas进行像素操作的

  14.        var data=imageData.data;

  15.        

  16.        for(var i=0,length=data.length;i<length;i=i+4)//data里面每4个数据项代表一个像素

  17.        {

  18.        data[i]=255-data[i];//红

  19.          data[i+1]=255-data[i+1];//绿

  20.            data[i+2]=255-data[i+2];//蓝

  21.        }

  22.        

  23.        ctx.putImageData(imageData,0,0);//把imageData再放回canvas

  24.        

  25.        }

  26.        photo.src="canvas-women.jpg";

  27.        

  28.        

  29.      }


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。