在网页里把若干张图片拼到一起，本质上有两条技术路线。一条是用HTML5的Canvas把图像画进同一个位图上下文，另一条是用CSS grid把多个img元素按网格摆放。两者最终视觉效果可能相似，但底层机制、导出能力和适用场景完全不同。
一、Canvas绘制拼接的原理与实现
Canvas拼接的核心是利用二维渲染上下文的drawImage方法，将不同图片对象绘制到同一块画布的不同坐标区域。由于Canvas本身是一块像素缓冲区，所有绘制操作都会直接修改位图数据，因此最后可以用toDataURL或toBlob导出成一张完整的图片文件。
这种方式适合需要把拼接结果保存、上传或进一步做像素处理的场景。比如把用户上传的多张证件照合成为一张A4预览图，或者在前端做简单的九宫格缩略图导出。它的缺点是必须等所有图片加载完成，且要注意跨域图片会导致画布被污染而无法导出。
// 假设已有三张图片地址
const urls = ['a.jpg', 'b.jpg', 'c.jpg'];
const canvas = document.createElement('canvas');
canvas.width = 900;
canvas.height = 300;
const ctx = canvas.getContext('2d');
function loadImage(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = 'anonymous'; // 避免跨域污染
img.onload = () => resolve(img);
img.onerror = reject;
img.src = url;
});
}
async function merge() {
const imgs = await Promise.all(urls.map(loadImage));
// 横向拼接，每张宽300
imgs.forEach((img, i) => {
ctx.drawImage(img, i * 300, 0, 300, 300);
});
const dataUrl = canvas.toDataURL('image/png');
console.log('合成图地址', dataUrl);
}
merge();
上面代码把三张图按每张300像素宽横向拼成900乘300的画布。drawImage的第二个和第三个参数是绘制起点坐标，第四、第五是绘制尺寸。如果原图比例不一致，这里直接拉伸会导致变形，实际项目里往往要先计算裁剪区域。
Canvas方案的明显优势是可编程性强，你能给每张图加水印、调透明度、做圆角遮罩。但代价是全部逻辑都得自己写，且大尺寸画布在低端设备上有内存压力。另外若图片来自不同域名且没设跨域头，toDataURL会抛安全错误。
二、CSS grid拼接布局的做法
CSS grid并不真正合并图像文件，而是通过网格容器把多个img标签排成指定行列。浏览器依旧请求并渲染独立图片，只是视觉上拼在一起。它不需要等待脚本执行，也不存在画布污染问题，纯靠样式完成。
这种方案适合后台相册、电商SKU预览等只展示不导出的需求。改一下grid-template就能从横向拼接触发为纵向或九宫格，响应式也很容易。缺点是用户长按保存只能存单张，无法拿到合成图。
<div class="grid">
<img src="a.jpg" alt="图1">
<img src="b.jpg" alt="图2">
<img src="c.jpg" alt="图3">
</div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
width: 900px;
}
.grid img {
width: 100%;
height: 300px;
object-fit: cover;
}
</style>
这段HTML加样式把三张图排成一行三列，间隙4像素，每张高度固定300，宽度随列自适应。object-fit:cover保证不变形裁剪填充。你完全不用写一行JS就能完成拼接展示。
如果要做响应式，只要把grid-template-columns改成auto-fill加minmax，就能在手机上自动变两列或一列。相比Canvas，维护和改版成本极低，但这只是一种视觉拼接，不是数据合并。
三、两种方案怎么选
从需求出发最直观：只要页面里摆好看，选CSS grid；要生成文件、加水印、传服务端，选Canvas。下表列出关键差异。
| 维度 | Canvas绘制 | CSS grid |
|---|---|---|
| 是否合并为单文件 | 是 | 否 |
| 能否导出下载 | 能 | 不能 |
| 跨域限制 | 有，会污染画布 | 无 |
| 代码复杂度 | 高，需JS控制 | 低，纯样式 |
| 响应式改版 | 需重算坐标 | 改CSS即可 |
实际项目里也可以混用：先用grid做编辑预览，用户点确认后再用Canvas按当前布局坐标重绘导出。这样既有低成本的试错界面，又有确定的产出文件。
还要注意Canvas绘制时若图片未加载完就drawImage，会得到空白。务必用image.onload或Promise封装。CSS grid则要注意grid容器宽度塌陷，最好给固定或最大宽度，否则移动端会挤成一团。
四、常见坑与处理
第一个坑是Canvas画布污染。当图片服务没返回Access-Control-Allow-Origin头，又给img设了crossOrigin，反而可能加载失败；不设crossOrigin则toDataURL报错。正确做法是确认对方支持CORS再设anonymous，或者用同域代理转发图片。
第二个坑是高分屏下Canvas模糊。可把canvas.width设为逻辑宽乘devicePixelRatio，再用ctx.scale放大，CSS宽不变，这样导出和显示都清晰。grid不存在此问题，因为img由浏览器原生处理。
const dpr = window.devicePixelRatio || 1; canvas.width = 900 * dpr; canvas.height = 300 * dpr; canvas.style.width = '900px'; canvas.style.height = '300px'; ctx.scale(dpr, dpr); // 之后按900x300逻辑坐标绘制即可
第三个坑是grid里图片高度不一导致行列错位。统一用object-fit加固定高，或在容器设align-items:stretch配合aspect-ratio，能让格子规整。Canvas则要在drawImage前用算法算好每张源图裁剪框，避免拉伸。
掌握这两套机制后，前端图片拼接不再是黑盒。按交付物形态倒推技术选型，基本不会走弯路。