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

// 使用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();}