使用JavaScript函數實現圖片處理和濾鏡效果
前言：
在Web開發中，圖片處理和濾鏡效果是非常常見的需求。借助JavaScript，我們可以通過編寫函數來實現這些功能。本文將介紹如何使用JavaScript函數來實現圖片處理和濾鏡效果，并提供具體的代碼示例。
- 圖片處理功能：
在圖片處理中，我們常常需要對圖片的大小進行調整、裁剪、旋轉等操作。下面是一些常見的圖片處理函數示例：
1.1 調整圖片大小
可以使用resizeImage函數來調整圖片的大小。該函數接受三個參數：源圖片對象、目標寬度和目標高度。
function resizeImage(img, width, height) {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
return canvas.toDataURL();
}
// 使用示例：
var img = new Image();
img.onload = function() {
var resized = resizeImage(img, 200, 200);
document.getElementById("result").src = resized;
};
img.src = "image.jpg";
登錄后復制
1.2 裁剪圖片
使用cropImage函數可以裁剪圖片。該函數接受四個參數：源圖片對象、裁剪起始點的x坐標、裁剪起始點的y坐標和裁剪的尺寸。
function cropImage(img, x, y, width, height) {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, x, y, width, height, 0, 0, width, height);
return canvas.toDataURL();
}
// 使用示例：
var img = new Image();
img.onload = function() {
var cropped = cropImage(img, 100, 100, 200, 200);
document.getElementById("result").src = cropped;
};
img.src = "image.jpg";
登錄后復制
1.3 旋轉圖片
可以通過rotateImage函數來旋轉圖片。該函數接受兩個參數：源圖片對象和旋轉的角度。
function rotateImage(img, angle) {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var width = img.width;
var height = img.height;
canvas.width = height;
canvas.height = width;
ctx.translate(height / 2, width / 2);
ctx.rotate(angle * Math.PI / 180);
ctx.drawImage(img, -width / 2, -height / 2);
return canvas.toDataURL();
}
// 使用示例：
var img = new Image();
img.onload = function() {
var rotated = rotateImage(img, 90);
document.getElementById("result").src = rotated;
};
img.src = "image.jpg";
登錄后復制
- 濾鏡效果：
除了常見的圖片處理功能以外，我們還可以使用JavaScript函數來實現一些濾鏡效果，如黑白、模糊等。下面是一些常用濾鏡效果的函數示例：
2.1 黑白濾鏡
使用blackAndWhite函數可以將圖片轉換成黑白效果。該函數接受一個參數：源圖片對象。
function blackAndWhite(img) {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var width = img.width;
var height = img.height;
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0);
var imageData = ctx.getImageData(0, 0, width, height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
var gray =
data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114;
data[i] = data[i + 1] = data[i + 2] = gray;
}
ctx.putImageData(imageData, 0, 0);
return canvas.toDataURL();
}
// 使用示例：
var img = new Image();
img.onload = function() {
var blackWhite = blackAndWhite(img);
document.getElementById("result").src = blackWhite;
};
img.src = "image.jpg";
登錄后復制
2.2 模糊濾鏡
使用blur函數可以對圖片進行模糊處理。該函數接受一個參數：源圖片對象。
function blur(img) {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var width = img.width;
var height = img.height;
canvas.width = width;
canvas.height = height;
ctx.filter = "blur(5px)";
ctx.drawImage(img, 0, 0);
return canvas.toDataURL();
}
// 使用示例：
var img = new Image();
img.onload = function() {
var blurred = blur(img);
document.getElementById("result").src = blurred;
};
img.src = "image.jpg";
登錄后復制
結語：
使用JavaScript函數可以方便地實現圖片處理和濾鏡效果。通過調整圖片大小、裁剪圖片、旋轉圖片等功能，可以滿足不同的需求。而通過應用濾鏡效果，可以為圖片添加藝術感和個性氣息。以上便是一些常見的圖片處理和濾鏡效果函數示例，希望對你有所幫助。
