JS使用canvas给图片打马赛克

最新推荐文章于 2025-05-19 10:47:42 发布

原创

最新推荐文章于 2025-05-19 10:47:42 发布 · 4.5k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了如何使用JavaScript结合canvas元素为图片添加马赛克效果。通过展示效果图并提供相关代码，详细解释了实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

利用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