您好,登錄后才能下訂單哦!
用JS實(shí)現(xiàn)圖片馬賽克效果。用js給圖片打馬賽克。
效果如下:
左邊是馬賽克之前的圖片,右邊是對(duì)圖片加馬賽克后的效果。
操作方法:
新建一個(gè)html文件,html區(qū)寫入以下內(nèi)容:
<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; ????????} ????????/** ?????????*?根據(jù)圖片填充馬賽克塊 ?????????*/ ????????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); ????????????????} ????????????} ????????}; ????????/** ?????????*?將數(shù)據(jù)畫到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'); ????????????/** ?????????????*?設(shè)置圖片來(lái)源 ?????????????*/ ????????????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對(duì)象,?及馬賽克大小 ?????*/ ????mosaicImage('canvas',?8);
說(shuō)明:
test.jpg是要馬賽克的圖片,放在網(wǎng)頁(yè)文件同一目錄下,馬賽克大小是可控的,如上面的代碼中所注釋的。
如果要對(duì)JS代碼進(jìn)行混淆加密,可以用JShaman平臺(tái),加密后就可以防止別人Copy自己的代碼了,還可以把代碼鎖定在指定的域名下,效果很不錯(cuò)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。