用JS实现图片马赛克效果。 - 行业资讯 - 肥雀云

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

<>强效果如下:

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

<强>操作方法:

新建一个html文件,html区写入以下内容:

 & lt;帆布id=盎肌眃ata-src=" https://www.yisu.com/zixun/test.jpg "宽度==?00”“800”高度祝辞& lt;/canvas>

JS代码部分写入:

 const mosaicImage=(目标,mosaicSize=20)=比;{
　　让帆布=. getelementbyid(目标),
　　_canvas=document.createElement(“画布”);
　　如果(!帆布| | ! canvas.getContext) {
　　返回错误;
　　}/* *
　　*根据图片填充马赛克块
　　*/const createMosaic=(上下文,宽度、高度、大小、数据)=比;{
　　(让y=0;y & lt;高度;y +=大小){
　　(让x=0;x & lt;宽度;x +=大小){/* *
　　*取出像素的r, g, b, a值
　　*/让cR=数据。数据(y *宽度+ x) * 4],
　　cG=数据。数据(y *宽度+ x) * 4 + 1),
　　cB=数据。数据(y *宽度+ x) * 4 + 2];
　　上下文。fillStyle=' rgb ($ {cR}, $ {cG}, {cB})美元”;
　　上下文。fillRect (x, y、x +大小、y +大小);
　　}
　　}
　　};/* *
　　*将数据画到画布上
　　*/const画=(_context imageData,上下文)=比;{
　　createMosaic (_context _canvas。宽度,_canvas。高度、mosaicSize imageData);
　　上下文。drawImage (_canvas, 0, 0);
　　};
　　
　　const init=()=比;{
　　让背景=canvas.getContext (2 d);/* *
　　*设置图片来源
　　*/让img=新形象();
　　img。src=https://www.yisu.com/zixun/canvas.getAttribute (“data-src”);/* *
　　*加载图片
　　*/img。onload=()=比;{
　　让_context=_canvas.getContext (2 d),
　　imageData;/* *
　　*图片大小与画布匹配
　　*/_canvas。宽度=img.width;
　　_canvas。身高=img.height;/* *
　　*重置帆布画布大小
　　*/画布。宽度=img.width;
　　画布。身高=img.height;
　　_context。drawImage (img, 0, 0);/* *
　　*获取帆布各像素的颜色信息
　　*像素的颜色信息从左到右,r, g, b, a值排列
　　*/imageData=https://www.yisu.com/zixun/_context.getImageData (0, 0, _canvas。宽度,_canvas.height);
　　画(_context imageData、背景);
　　};
　　};
　　init ();
　　};/* *
　　* div对象,及马赛克大小
　　*/mosaicImage(“画布”,8);

<强>说明:

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

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