<html>
<head>
<meta charset="UTF-8">
<title>像素處理</title>
<script>
function draw(id){
var c=document.getElementById('canvas');
if(c==null)
return false;
var cxt=c.getContext("2d");
var img=new Image();
img.src="img/1.jpg";
img.οnlοad=function(){
cxt.drawImage(img,0,0);//顯示所繪製的圖像
// var imagedata=cxt.getImageData(0,0,img.width,img.height);
// for(var i=0,n=imagedata.data.length;i<n;i+=4)
// {
// imagedata.data[i+0]=255-imagedata.data[i+0];
// imagedata.data[i+1]=255-imagedata.data[i+2];
// imagedata.data[i+2]=255-imagedata.data[i+1];
// }
// cxt.putImageData(imagedata,0,0);
};
}
</script>
</head>
<body οnlοad="draw('canvas')">
<canvas id="canvas" width="400" height="300" style="border:1px solid blue;"></canvas>
</body>
</html>
加上註釋後：
撤銷註釋後：
