JavaScript + Canvas 实现图片九宫格切割与动画展示

核心逻辑与技术准备

实现图片切割的核心在于 Canvas 的 getImageData 方法。该方法可以提取画布上指定矩形区域的像素数组，修改后的像素数据可以通过 putImageData 写回画布的指定位置。我们不需要真的去修改每个像素的颜色，只需要通过计算坐标，将原本连续的图像数据“搬运”到画布的不同格子中，并在格子间留出空白（间距），视觉上就形成了切割效果。

操作前需准备两个 DOM 元素：一个用于显示最终效果的 <canvas> 标签和一个隐藏原始图片的 <img> 标签。确保图片资源加载完成后再执行脚本，避免跨域或空指针问题。

第1步：编写 ImageGrid 封装函数

目的：创建一个通用的工具函数，接收画布ID、图片ID、切割行列数、间距等参数，自动完成像素提取与重绘。入口为全局作用域，动作是定义构造函数式函数。

/**
 * @param {string} canvasid - HTML canvas 标签 id
 * @param {string} imageid - HTML img 标签 id
 * @param {number} gridcountX - X轴图片分割个数
 * @param {number} gridcountY - Y轴图片分割个数
 * @param {number} gridspace - 宫格空隙宽度
 * @param {number} offsetX - X轴整体偏移量
 * @param {number} offsetY - Y轴整体偏移量
 * @param {boolean} isanimat - 是否启用动画逐个显示
 */
function ImageGrid(canvasid, imageid, gridcountX, gridcountY, gridspace, offsetX, offsetY, isanimat) {
    var image = new Image();
    var g = document.getElementById(canvasid).getContext("2d");
    var img = document.getElementById(imageid);
    
    // 绑定图片源
    image.src = img.getAttribute("src");
    
    // 1. 将完整图片绘制到 Canvas 以获取数据
    g.drawImage(image, 0, 0);
    
    // 2. 提取所有像素数据
    var imagedata = g.getImageData(0, 0, image.width, image.height);
    
    // 3. 计算每个宫格的宽和高
    var grid_width = imagedata.width / gridcountX;
    var grid_height = imagedata.height / gridcountY;
    
    if (isanimat) {
        // === 动画模式 ===
        var x = 0, y = 0;
        var inter = setInterval(function() {
            // 使用 putImageData 将像素块绘制到当前位置
            // 参数：data, dx, dy, sWidth, sHeight, sx, sy, dWidth, dHeight
            // 这里简化理解：从原图的(x,y)起始位置截取(grid_width, grid_height)，放到(dx, dy)
            g.putImageData(imagedata, gridspace * x + offsetX, gridspace * y + offsetY, 
                           grid_width * x, grid_height * y, grid_width, grid_height);
            
            // 坐标推进逻辑
            x < gridcountX ? x++ : x = 0;
            if (x == 0) {
                y < gridcountY ? y++ : y = 0;
            }
            
            // 动画结束清除定时器
            if (y == gridcountY && x >= gridcountX) {
                clearInterval(inter);
            }
        }, 200);
    } else {
        // === 非动画模式（直接渲染） ===
        for (var y = 0; y < gridcountY; y++) {
            for (var x = 0; x < gridcountX; x++) {
                // 同样使用 putImageData 进行分块绘制
                g.putImageData(imagedata, gridspace * x + offsetX, gridspace * y + offsetY,
                               grid_width * x, grid_height * y, grid_width, grid_height);
            }
        }
    }
}

第2步：构建 HTML 基础结构

目的：提供渲染容器。需确保 Canvas 尺寸大于或等于图片实际尺寸加上最大偏移量，防止裁剪。

<!-- 设置足够大的 Canvas 区域 -->
<canvas id="canvas1" width="900" height="550">Your browser does not support the canvas tag.</canvas>

<!-- 隐藏原始图片，作为数据源 -->
<img id="image1" style="display:none" src="你的本地图片路径.jpg"/>

第3步：调用函数实现效果

目的：在不同场景下复用该功能。注意第三个参数为 X 轴格数，第四个为 Y 轴格数。

// 示例1：3x3 九宫格，带入场动画，整体向右偏移220px，横向间隙2px
ImageGrid("canvas1", "image1", 3, 3, 2, 220, 0, true); 

// 示例2：4x4 十六宫格，带动画，整体向右偏移440px
ImageGrid("canvas1", "image1", 4, 4, 2, 440, 0, true);

// 示例3：3x4 混合排列，无动画（瞬间完成）
ImageGrid("canvas1", "image1", 3, 4, 2, 660, 0, false); 

关键点说明与注意事项

1. 坐标系计算： 代码中使用 gridspace * x + offsetX 来控制每格的物理位置。如果图片较大而 Canvas 较小，请相应增加 width 和 height 属性值，或者调整 offsetX/Y 使画面居中。
2. 性能考虑： getImageData 会创建一个新的 ImageData 对象，对于超大分辨率图片（如超过 4K）可能会占用较多内存。若仅需静态切割且无动画，建议将循环内的绘制频率降低或使用 CSS Grid/Flexbox 配合多张切片图（后端生成）以获得更好性能。
3. CORS 跨域问题： 如果图片来自外部域名，必须确保服务器设置了允许跨域的 Header (Access-Control-Allow-Origin)，否则 getImageData 会因为安全策略抛出 "Tainted canvases may not be exported" 错误。建议使用本地同源图片或添加 img.crossOrigin = 'anonymous' 属性。

扩展应用

此段 JS + Canvas 代码非常适合用于微信小程序中的“分享海报”功能。用户点击分享时，动态将当前页面截图或指定图片切成 9 格，不仅增加了视觉趣味性，还能防止部分平台对直接链接二维码的拦截，是一种常见的前端“障眼法”或营销手段。结合 AI 提示词生成等技术，甚至可以进一步自动化图片的美化处理流程。

以上就是 JavaScript + Canvas 制作图片九宫格切割及动画效果的详细内容，更多关于前端图片处理技巧的资料请关注本站其它相关文章！