img
canvas
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>canvas_filter2</title>
<meta name="description" content="" />
<meta name="author" content="hua" />
</head>
<body>
img<img id="myImg">
canvas<canvas id="myCanvas" width="200" height="200">
不支援Canvas。
</canvas>
</body>
</html>
<script type="text/javascript">
(function(){
var canvas,context,img;
var init = function(){
canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');
img = document.getElementById('myImg');
img.addEventListener('load' ,loadHandler , false);
img.src = "images/lena.png";
};
var loadHandler = function(e){
context.drawImage(img , 0, 0);
var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
var data = imgData.data;
var dataSize = data.length;
//主要公式
for (var i = 0; i < dataSize ; i=i+4) {
data[i] = 255 - data[i]; //R
data[i + 1] = 255 - data[i + 1]; //G
data[i + 2] = 255 - data[i + 2]; //B
}
context.putImageData(imgData, 0, 0);
};
init();
}());
</script>
沒有留言:
張貼留言