<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"></meta>
<title>canvas</title>
<script type="text/javascript">
var cvs,ctx;
window.onload=function(){
cvs=document.getElementById("cvs");
ctx=cvs.getContext("2d");
/*
var img=new Image();
img.src="T.jpg";
img.onload=function(){
ctx.drawImage(this,0,0,cvs.width,cvs.height);
};
*/
};
function invertColor(){
var pixels= ctx.getImageData(0,0,cvs.width,cvs.height);
var data=pixels.data;
var ave;
for(var i=0;i<data.length;i+=4){
ave=(data[i]+data[i+1]+data[i+2])/3;
data[i]=ave;
data[i+1]=ave;
data[i+2]=ave;
}
ctx.putImageData(pixels,0,0);
}
function loadfile(input){
var file=input.files[0];
var src=URL.createObjectURL(file);
var img=new Image();
img.src=src;
img.onload=function(){
ctx.drawImage(this,0,0,cvs.width,cvs.height);
}
}
function saveFile(){
var link=document.getElementById("download");
link.download="image.jpg";
link.href=cvs.toDataURL("Image/jpeg");
link.click();
}
</script>
</head>
<body >
<div>
<input type="file" onchange="loadfile(this);"></input>
<button onclick="saveFile();" >儲存檔案</button>
<a id="download"></a>
<button onclick="invertColor();">顏色變灰色</button>
</div>
<canvas id="cvs" width="800" height="600" style="border:1px solid #c3c3c3;"></canvas>
</body>
</html>
沒有留言:
張貼留言