JS使用canvas给图片打马赛克

简介

利用canvas加载图片后，画布上的各像素的颜色（r,g,b）值来填充色块，达到马赛克效果。

效果图



 

代码


 
 
 

  
  
html
 
 

<canvas id="canvas" data-src="images/test.jpg" width="800" height="600"></canvas>



 
 
 

  
  
javascript
 
 

    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值
                     */
                    le