Canvas几种图像滤镜的实现
图像滤镜实际上是把读取的图像数据加以修改，从而在保存图像原本信息基础上显示出不同的图像风格。
首先我们拿一个基本的24位图像作为源文件：
负片滤镜：
for(i = 0; i <= data.length - 4; i += 4){
data[i] = 255 - data[i];
data[i + 1] = 255 - data[i + 1];
data[i + 2] = 255 - data[i + 2];
}
黑白滤镜：
for(i = 0; i <= data.length - 4; i += 4){
average = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = average;
data[i + 1] = average;
data[i + 2] = average;
}
浮雕滤镜：
for(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];
}
}
}
墨镜滤镜：
for(i = 0; i <= data.length; ++i){
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+1] = data[i-1];
i+=4;
}
else{
data[i] = 2*data[i] -1.5*data[i + 4];
}
}
}
最后附上完整代码：
<!DOCTYPE html>
<html>
<head>
<title>我的练习</title>
<script src="lab.js" charset="UTF-8"></script>
<meta charset="utf-8">
</head>
<body>
<div>
<input type="button" id="restoreButton" value="restore"/>
<input type="button" id="negativeButton" value="Negative"/>
<input type="button" id="noColorButton" value="noColor"/>
<input type="button" id="embossingButton" value="embossing"/>
<input type="button" id="sunGlassButton" value="sunGlass"/>
</div>
<canvas id="canvas" width="800" height="600">对不起你的浏览器不支持canvas</canvas>
</body>
</html>window.onload = function(){
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
var image = new Image();
negativeButton = document.getElementById("negativeButton");
noColorButton = document.getElementById("noColorButton");
restoreButton = document.getElementById("restoreButton");
embossingButton = document.getElementById("embossingButton");
sunGlassButton = document.getElementById("sunGlassButton");
restoreButton.onclick = function(){
context.drawImage(image, 0, 0, image.width, image.height, 0, 0, context.canvas.width, context.canvas.height);
};
noColorButton.onclick = function(){
var imageData = context.getImageData(0, 0, context.canvas.width, context.canvas.height);
var data = imageData.data;
var i;
var average;
for(i = 0; i <= data.length - 4; i += 4){
average = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = average;
data[i + 1] = average;
data[i + 2] = average;
}
context.putImageData(imageData, 0, 0);
};
negativeButton.onclick = function(){
var imageData = context.getImageData(0, 0, context.canvas.width, context.canvas.height);
var data = imageData.data;
var i;
for(i = 0; i <= data.length - 4; i += 4){
data[i] = 255 - data[i];
data[i + 1] = 255 - data[i + 1];
data[i + 2] = 255 - data[i + 2];
}
context.putImageData(imageData, 0, 0);
};
embossingButton.onclick = function(){
var imageData = context.getImageData(0, 0, context.canvas.width, context.canvas.height);
var data = imageData.data;
var width =imageData.width;
var length = data.length;
var i;
for(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);
};
sunGlassButton.onclick = function(){
var imageData = context.getImageData(0, 0, context.canvas.width, context.canvas.height);
var data = imageData.data;
var width = imageData.width;
var i;
for(i = 0; i <= data.length; ++i){
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+1] = data[i-1];
i+=4;
}
else{
data[i] = 2*data[i] -1.5*data[i + 4];
}
}
}
context.putImageData(imageData, 0, 0);
};
image.src = "determine.bmp";
image.onload = function(){
context.drawImage(image, 0, 0, image.width, image.height, 0, 0, context.canvas.width, context.canvas.height);
}
};
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
