Canvas图像滤镜详解，掌握灰度、模糊、锐化、色彩调整等滤镜效果实现。通过像素操作可以实现各种图像滤镜效果，如灰度、模糊、锐化等。
滤镜通过遍历图像像素，对每个像素的颜色值进行数学运算来实现效果。
function grayscale(imageData) {
const data = imageData.data
for (let i = 0; i < data.length; i += 4) {
const avg = (data[i] + data[i + 1] + data[i + 2]) / 3
data[i] = avg // R
data[i + 1] = avg // G
data[i + 2] = avg // B
}
return imageData
}
function invert(imageData) {
const data = imageData.data
for (let i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i] // R
data[i + 1] = 255 - data[i + 1] // G
data[i + 2] = 255 - data[i + 2] // B
}
return imageData
}
function brightness(imageData, value) {
const data = imageData.data
for (let i = 0; i < data.length; i += 4) {
data[i] = Math.min(255, Math.max(0, data[i] + value))
data[i + 1] = Math.min(255, Math.max(0, data[i + 1] + value))
data[i + 2] = Math.min(255, Math.max(0, data[i + 2] + value))
}
return imageData
}
function contrast(imageData, value) {
const data = imageData.data
const factor = (259 * (value + 255)) / (255 * (259 - value))
for (let i = 0; i < data.length; i += 4) {
data[i] = Math.min(255, Math.max(0, factor * (data[i] - 128) + 128))
data[i + 1] = Math.min(255, Math.max(0, factor * (data[i + 1] - 128) + 128))
data[i + 2] = Math.min(255, Math.max(0, factor * (data[i + 2] - 128) + 128))
}
return imageData
}
简单的盒式模糊：
function boxBlur(imageData, radius) {
const data = imageData.data
const width = imageData.width
const height = imageData.height
const copy = new Uint8ClampedArray(data)
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
let r = 0, g = 0, b = 0, count = 0
for (let dy = -radius; dy <= radius; dy++) {
for (let dx = -radius; dx <= radius; dx++) {
const nx = x + dx
const ny = y + dy
if (nx >= 0 && nx < width && ny >= 0 && ny < height) {
const i = (ny * width + nx) * 4
r += copy[i]
g += copy[i + 1]
b += copy[i + 2]
count++
}
}
}
const i = (y * width + x) * 4
data[i] = r / count
data[i + 1] = g / count
data[i + 2] = b / count
}
}
return imageData
}
function applyFilters(imageData, filters) {
filters.forEach(filter => {
filter(imageData)
})
return imageData
}
// 使用示例
applyFilters(imageData, [
data => grayscale(data),
data => brightness(data, 20),
data => contrast(data, 30)
])
性能考虑
像素操作较慢，大图像应考虑使用Web Worker。
边界处理
注意处理图像边界情况。
颜色范围
确保颜色值在0-255范围内。