JS实现马赛克图片效果完整示例

JS实现马赛克图片效果是一种常见的图片处理技术，本文将提供一个完整的JavaScript实现马赛克图片效果的指导攻略。

准备工作

在开始之前，我们需要准备以下工作：
- 一张待处理的图片；
- canvas元素来绘制图片；
- 一个储存绘画数据的数组。

实现步骤

1. 加载图片数据；
2. 创建canvas元素；
3. 将图片绘制到canvas上；
4. 获取每个像素RGBA的值;
5. 根据像素值计算得到其对应的颜色块。
6. 将颜色块绘制回canvas元素上。

示例1

接下来，让我们来看看一个简单的示例，它可以将图片处理为一个灰色的马赛克效果。

let img = new Image(); // 创建image对象
img.crossOrigin = 'anonymous'; // 跨域处理
img.src = 'image.png'; // 加载图片

img.onload = function() { // 图片加载完毕后执行
    let canvas = document.createElement('canvas'); // 创建canvas元素
    canvas.width = img.width; 
    canvas.height = img.height;
    document.body.appendChild(canvas);

    let ctx = canvas.getContext('2d'); // 获取canvas上下文
    ctx.drawImage(img, 0, 0); // 将图片绘制到canvas上

    let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); // 获取图片像素数据
    let pixels = imageData.data;

    for (let i = 0; i < pixels.length; i += 4) { // 遍历所有像素
        let grayscale = (pixels[i] + pixels[i+1] + pixels[i+2]) / 3; // 计算RGB均值
        pixels[i] = grayscale; // 灰度化
        pixels[i+1] = grayscale;
        pixels[i+2] = grayscale;
    }

    ctx.putImageData(imageData, 0, 0); // 将修改后的数据写回canvas
};

示例2

除了示例1中的马赛克效果，我们还可以实现其他不同的效果，比如说，以下的示例实现了一种随机颜色的马赛克效果。

function main() {
    let img = new Image();
    img.crossOrigin = 'anonymous';
    img.src = 'image.png';

    img.onload = function() {
        let canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        document.body.appendChild(canvas);

        let ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);

        let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        let pixels = imageData.data;

        let tileWidth = 5;
        let tileHeight = 5;

        for (let y = 0; y < img.height; y += tileHeight) {
            for (let x = 0; x < img.width; x += tileWidth) {
                let randomIndex = (y * img.width + x) * 4;
                let color = [pixels[randomIndex], pixels[randomIndex+1], pixels[randomIndex+2]];
                for (let tileY = y; tileY < y + tileHeight; tileY++) {
                    if (tileY >= img.height) break;
                    for (let tileX = x; tileX < x + tileWidth; tileX++) {
                        if (tileX >= img.width) break;
                        let index = (tileY * img.width + tileX) * 4;
                        pixels[index] = color[0];
                        pixels[index+1] = color[1];
                        pixels[index+2] = color[2];
                    }
                }
            }
        }

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

main();

总结

通过以上两个示例，我们基本了解了如何使用JavaScript实现马赛克图片效果。通过修改像素数据，并将修改后的数据绘制回canvas上，我们可以轻松实现多种马赛克效果，为我们的图片处理提供更多的灵活性。