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

傷城~ 2022-01-17 15:13 482阅读 0赞

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

**效果如下：**

![v2-4807f8f6f62147f0a6724d4a6443a7dc\_1200x500.jpg][v2-4807f8f6f62147f0a6724d4a6443a7dc_1200x500.jpg]

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

**操作方法：**

新建一个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**][JShaman]平台，加密后就可以防止别人Copy自己的代码了，还可以把代码锁定在指定的域名下，效果很不错。

转载于:https://blog.51cto.com/14237227/2385097

[v2-4807f8f6f62147f0a6724d4a6443a7dc_1200x500.jpg]: https://s1.51cto.com/images/20190426/1556256910664791.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[JShaman]: http://www.jshaman.com/