http://www.hui12.com/nbin/canvas/c1.html
https://nbin2008.github.io/demo/mosaic/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圖片色彩反轉-灰度</title>
</head>
<body>
<canvas id="c1" width="200" height="200"></canvas>
<canvas id="c2" width="200" height="200"></canvas>
<button id="btn1">灰度</button>
<button id="btn2">反轉</button>
<script type="text/javascript">
var c1 = document.getElementById('c1');
var c2 = document.getElementById('c2');
var ctx1 = c1.getContext('2d');
var ctx2 = c2.getContext('2d');
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var img = new Image();
img.src = 'images/a1.jpg';
img.onload = function(){
ctx1.drawImage(img,0,0,200,200);
btn1.onclick = function(){
fnCopy(1);
};
btn2.onclick = function(){
fnCopy(2);
};
fnCopy(1);
};
function fnCopy(type){
ctx2.clearRect(0,0,200,200);
var imageData = ctx1.getImageData(0,0,200,200);
var data = imageData.data;
if( type == 1 ){
for( var i=0; i<data.length; i+=4 ){
var average = (data[i] + data[i+1] + data[i+2])/3;
data[i] = average;
data[i+1] = average;
data[i+2] = average;
};
}else if( type == 2 ){
for( var i=0; i<data.length; i+=4 ){
data[i] = 255 - data[i];
data[i+1] = 255 - data[i+1];
data[i+2] = 255 - data[i+2];
};
};
ctx2.putImageData(imageData,0,0)
};
</script>
</body>
</html>