用js怎么实现图片马赛克效果？

Answer 1

// 使用canvas获取ImageData，然后遍历修改像素数据实现

class Main {
    init() {
        var cvs = document.getElementById("canvas");
        var ctx = cvs.getContext("2d");
        var _img = new Image();
        _img.src = "./img/loginbg.jpg";
        _img.onload = () => {
            ctx.drawImage(_img, 0, 0);
            let _db = ctx.getImageData(0, 0, cvs.width, cvs.height);
            ctx.clearRect(0,0,640, 1136);
            ctx.putImageData(this.toPixelate(_db, ctx, 5), 0, 0);
        }
    }

    toPixelate(imgDb, ctx, lv) {
        if (!lv) {
            lv = 3;
        }
        let rsl = ctx.createImageData(imgDb.width, imgDb.height);
        let _db1 = [];
        for(let i=0;i<imgDb.data.length;i+=4) {
            _db1.push([
                imgDb.data[i], imgDb.data[i+1], imgDb.data[i+2], imgDb.data[i+3]
            ])
        }
        for (let i=0;i<imgDb.width;i++) {
            for (let j=0;j<imgDb.height;j++) {
                let fi = i-(i%lv);
                let fj = j-(j%lv);
                _db1[j*imgDb.width+i] = [..._db1[fj*imgDb.width+fi]];
            }
        }

        _db1.forEach((v, i) => {
            const k = i*4;
            rsl.data[k] = v[0];
            rsl.data[k+1] = v[1];
            rsl.data[k+2] = v[2];
            rsl.data[k+3] = v[3];
        })

        return rsl;
    }

}

var main;
window.onload = function () {
    main = new Main();
    main.init();
}