用JS实现图片马赛克效果。用js给图片打马赛克。

效果如下：


左边是马赛克之前的图片，右边是对图片加马赛克后的效果。

操作方法：

新建一个html文件，html区写入以下内容：

<canvas id="canvas" data-src="test.jpg" width="800" height="600"></canvas>

JS代码部分写入：

 const mosaicImage = (target, mosaicSize = 20) => {        let canvas = document.getElementById(target),            _canvas = document.createElement('canvas');        if (!canvas || !canvas.getContext) {            return false;        }        /**         * 根据图片填充马赛克块         */        const createMosaic = (context, width, height, size, data) => {            for (let y = 0; y < height; y += size) {                for (let x = 0; x < width; x += size) {                    /**                     * 取出像素的r,g,b,a值                     */                    let cR = data.data[(y * width + x) * 4],                        cG = data.data[(y * width + x) * 4 + 1],                        cB = data.data[(y * width + x) * 4 + 2];                    context.fillStyle = `rgb(${cR},${cG},${cB})`;                    context.fillRect(x, y, x + size, y + size);                }            }        };        /**         * 将数据画到canvas         */        const draw = (_context, imageData, context) => {            createMosaic(_context, _canvas.width, _canvas.height, mosaicSize, imageData);            context.drawImage(_canvas, 0, 0);        };        const init = () => {            let context = canvas.getContext('2d');            /**             * 设置图片来源             */            let img = new Image();            img.src = canvas.getAttribute('data-src');            /**             * 加载图片             */            img.onload = () => {                let _context = _canvas.getContext('2d'),                    imageData;                /**                 * 图片大小与canvas匹配                 */                _canvas.width = img.width;                _canvas.height = img.height;                /**                 * 重置canvas画布大小                 */                canvas.width = img.width;                canvas.height = img.height;                _context.drawImage(img, 0, 0);                /**                 * 获取canvas各像素的颜色信息                 * 像素的颜色信息从左到右,r, g, b, a 值排列                 */                imageData = _context.getImageData(0, 0, _canvas.width, _canvas.height);                draw(_context, imageData, context);            };        };        init();    };    /**     * div对象, 及马赛克大小     */    mosaicImage('canvas', 8);

说明：

test.jpg是要马赛克的图片，放在网页文件同一目录下，马赛克大小是可控的，如上面的代码中所注释的。

如果要对JS代码进行混淆加密，可以用JShaman平台，加密后就可以防止别人Copy自己的代码了，还可以把代码锁定在指定的域名下，效果很不错。