html5解析图片-创新互联

一 图片预览
HTML5给web开发带来很多好东西，可以说，它将开创新一代web开发。
其中canvas就是它带来的东西之一，canvas非常强大，可以做到很多东西。这里只是展示一个简单的canvas效果。如下图：

二 原理介绍
在代码中通过ctx.getImageData(0,0,width,height);获取canvas里面的p_w_picpathdata对象，而这个对象就是这个效果实现的关键。
通过p_w_picpathdata.data来获取一个数组，这个数组的length是canvas像素数量的四倍，其中每四个项代表一个像素。在每四个项里，他们一次代表rgba，rgb就很明显了，而a就代表透明，当a为255的时候完全不透明，当a为0的时候就是透明的。而这次的效果无需用到透明，所以没对这个进行操作。
最后通过ctx.putImageData(p_w_picpathData,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 p_w_picpathData=ctx.getImageData(0,0,width,height);//取得canvas的p_w_picpathData，我们就是通过这个对canvas进行像素操作的

14.     var data=p_w_picpathData.data;

15.      

16.     for(var i=0,length=data.length;i

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(p_w_picpathData,0,0);//把p_w_picpathData再放回canvas

24.      

25.     }

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

27.      

28.      

29.     }

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。