![218e052d5dd71ba56016958b2aa1d99b.png](https://i-blog.csdnimg.cn/blog_migrate/e6063678011d2ad4b4dab8772dc92b27.jpeg)
用JS实现图片马赛克效果。用js给图片打马赛克。
效果如下:
![c7ec3055b753d91bdb298626c8a94d0e.png](https://i-blog.csdnimg.cn/blog_migrate/4e366ff0a59a519b0d2ef4a4a1eaefb7.jpeg)
左边是马赛克之前的图片,右边是对图片加马赛克后的效果。
操作方法:
新建一个html文件,html区写入以下内容:
<canvas id="canvas" 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('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自己的代码了,还可以把代码锁定在指定的域名下,效果很不错。