4.5.2.4_浮雕濾鏡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮雕濾鏡</title>
<style>
body{
background: #eee;
}
#canvas{
background: #fff;
cursor: pointer;
margin-left: 20px;
margin-top: 50px;
box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
-webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
-moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
}
#controls{
position: absolute;
top: 20px;
left: 50px;
}
</style>
</head>
<body>
<div id="controls"><input type="button" id="embossBtn" value="原圖" /></div>
<canvas id="canvas" width="800" height="520"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var embossBtn = document.getElementById('embossBtn');
var image = new Image();
var embossed = false;
image.src = 'img/waterfall.jpg';
image.onload = function(){
drawOriginalImage();
}
embossBtn.onclick = function(){
if(embossed){
embossBtn.value = '浮雕';
drawOriginalImage();
embossed=false;
}else{
embossBtn.value = '原圖';
drawEmboss();
embossed=true;
}
}
function drawOriginalImage(){
context.drawImage(image,0,0,image.width,image.height,0,0,canvas.width,canvas.height);
}
function drawEmboss(){
var imageData = context.getImageData(0,0,canvas.width,canvas.height);
var data = imageData.data;
var width = imageData.width;
var length = data.length;
for(var i =0;i<length;i++){
if(i<length-width*4){
if((i+1)%4 !==0){
if((i+4)%(width*4) == 0){
data[i] = data[i-4];
data[i+1] = data[i-3];
data[i+2] = data[i-2];
data[i+3] = data[i-1];
i+=4;
}else{
data[i] = 255/2
+ 2*data[i]
- data[i+4]
- data[i+width*4];
}
}
}else{
if((i+1)%4 !== 0){
data[i] = data[i -width+4];
}
}
}
context.putImageData(imageData,0,0);
}
</script>
</html>
