JavaScript实现基于Canvas的图像滤镜效果

// 获取HTML中的元素
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const image = new Image();
image.src = 'example.jpg'; // 替换为你的图片地址

// 图片加载完成后执行滤镜处理
image.onload = function() {
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 0, 0);

    // 灰度滤镜
    document.getElementById('grayscale').addEventListener('click', function() {
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const pixels = imageData.data;

        for (let i = 0; i < pixels.length; i += 4) {
            const grayscale = pixels[i] * 0.3 + pixels[i + 1] * 0.59 + pixels[i + 2] * 0.11;
            pixels[i] = grayscale; // red
            pixels[i + 1] = grayscale; // green
            pixels[i + 2] = grayscale; // blue
        }

        ctx.putImageData(imageData, 0, 0);
    });

    // 高斯模糊滤镜
    document.getElementById('blur').addEventListener('click', function() {
        stackBlurCanvasRGBA('myCanvas', 0, 0, canvas.width, canvas.height, 10);
    });

    // 恢复原始图片
    document.getElementById('reset').addEventListener('click', function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(image, 0, 0);
    });
};

// 高斯模糊函数（第三方库）
function stackBlurCanvasRGBA(id, top_x, top_y, width, height, radius) {
    const canvas = document.getElementById(id);
    const context = canvas.getContext('2d');
    let imageData;

    try {
        try {
            imageData = context.getImageData(top_x, top_y, width, height);
        } catch (e) {
            // NOTE: security error, img on diff domain
            console.log(e);
            return;
        }
        stackBlurCanvasRGBA.imageData = imageData;
        stackBlurCanvasRGBA.radius = radius;
        stackBlurCanvasRGBA.width = width;
        stackBlurCanvasRGBA.height = height;

        stackBlurCanvasRGBA.r = new Uint32Array(256);
        stackBlurCanvasRGBA.g = new Uint32Array(256);
        stackBlurCanvasRGBA.b = new Uint32Array(256);
        stackBlurCanvasRGBA.a = new Uint32Array(256);

        return stackBlurCanvasRGBA.process();
    } catch (e) {
        console.log(e);
    }
}

// 页面初始化
document.addEventListener('DOMContentLoaded', function() {
    // 初始化canvas和事件监听
    // 省略部分...
});

1. 代码详细解析：

   • 图片加载和绘制：通过new Image()创建图片对象，并在图片加载完成后使用ctx.drawImage()将图片绘制到Canvas上。

   • 灰度滤镜：点击灰度按钮时，获取图像的像素数据，按照灰度公式修改每个像素的RGB值，然后使用ctx.putImageData()将修改后的数据重新绘制到Canvas上。

   • 高斯模糊滤镜：点击模糊按钮时，调用stackBlurCanvasRGBA函数实现高斯模糊效果，该函数是基于第三方库实现的，用于在Canvas上应用高斯模糊。

   • 恢复原始图片：点击重置按钮时，清除Canvas上的内容并重新绘制原始图片，恢复到初始状态。