温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-07-26 05:28:21 来源:网络 阅读:933 作者:w2sft 栏目:编程语言

用JS实现图片马赛克效果。用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自己的代码了,还可以把代码锁定在指定的域名下,效果很不错。


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI