用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自己的代碼了，還可以把代碼鎖定在指定的域名下，效果很不錯。