html获取图片原理,html5 解析图片

window.onload = function() {

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

photo.οnlοad=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 p_w_picpathData=ctx.getImageData(0,0,width,height);//取得canvas的p_w_picpathData，我们就是通过这个对canvas进行像素操作的

var data=p_w_picpathData.data;

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

{

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

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

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

}

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

}

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

}