图片拼贴指南

将多张图片组合成网格、自由布局或杂志风格的拼贴画。调整间距、边框、背景颜色和宽高比。所有操作均在您的浏览器中本地运行，无需上传至任何服务器。

所需条件

浏览器 — 支持 OffscreenCanvas 的 Chrome、Firefox、Safari 或 Edge 格式 — JPG、JPEG、PNG、WEBP、AVIF、GIF、BMP 或 TIFF 限制 — 每个文件 20 MB（超过 20 MB 的文件将被拒绝） 账户 — 无需注册 互联网 — 页面加载后无需联网

创建您的拼贴画

在浏览器中打开 Image Collage。从文件资源管理器中拖拽多张图片文件并放入上传区域。或者，点击上传区域从设备中选择多个文件。每个文件必须在 20 MB 限制内，超过此限制的文件将被拒绝。选择您的布局类型：网格、自由布局或杂志。网格将图片排列成统一的行和列。自由布局允许您在画布上随意拖动和定位每张图片。杂志布局应用具有混合尺寸和位置的编辑风格。使用颜色选择器设置背景颜色。使用滑块调整图片间距。通过设置宽度和颜色添加边框。对于网格布局，请选择列数。对于杂志布局，请调整画布的宽高比。点击生成按钮。OffscreenCanvas API 会将所有图片合成到单个画布上。libvips 根据您的布局选择定位每张图片，应用间距和边框，并填充背景。数据不会通过网络传输。拼贴画生成后，会出现下载按钮。点击它将拼贴画保存到您的设备。浏览器直接将文件从内存写入磁盘。下载完成后，libvips 会自动释放临时内存缓冲区。

工作原理

Image Collage 使用 OffscreenCanvas API 将多张图片合成到单个画布上。当您上传图片时，浏览器会直接将其读取到内存中，不会发生服务器上传。

libvips 根据您的布局选择和图片数量计算画布尺寸。对于网格布局，它通过计算总图片数量和列设置来将画布划分为统一的单元格，确保每个单元格获得相等的像素分配。对于自由布局，它使用默认排列，您可以通过将每张图片拖动到任何画布坐标来修改它。对于杂志布局，它应用混合尺寸的编辑规则，较大的图片获得更多的画布区域，较小的图片填充它们周围的空隙。

每张图片都使用 OffscreenCanvas 渲染绘制在画布的计算位置上。libvips 通过在单元格边界之间留出像素间隙来应用图片间距，通过以您选择的宽度和颜色描边矩形来添加边框，并在合成任何图片之前使用颜色选择器值作为填充样式来填充背景。

合成后，libvips 使用 canvas toBlob 方法将画布转换为 PNG 或 JPEG 图像，该方法将像素数据编码为选定的图像格式。生成的二进制 blob 通过 URL. createObjectURL 传递，创建一个临时内存引用指针，浏览器使用该指针提供文件下载。下载完成后，libvips 调用 URL.

文件完全在您的浏览器中使用 OffscreenCanvas 进行处理。它们永远不会上传到 ConvertCraft 服务器。您的原始文件保留在您的设备上，libvips 将它们读取到内存中，合成拼贴画，并在下载后丢弃像素缓冲区。

遇到问题时

部分文件上传失败：这些文件超过了 20 MB 的限制。OffscreenCanvas 在严格的内存限制内运行。处理超过 20 MB 的图像需要 RAM 中大量的未压缩像素缓冲区，这可能会导致浏览器标签页崩溃。

图像显示失真：拼贴布局会将图像缩放以适应单元格，这可能会导致宽高比失真。请使用原始宽高比选项或调整单元格尺寸以匹配您的图像。

画布太大：太多高分辨率图像会产生非常大的画布。浏览器可能会耗尽内存。请减少图像数量或使用分辨率较低的源文件。

拼贴画看起来未对齐：网格布局需要尺寸一致的图像。不匹配的宽高比会导致间距不均匀。上传前请将图像裁剪为一致的尺寸。

### 我可以包含多少张图片？

实际限制取决于浏览器可用的内存。libvips 按顺序处理图像以管理内存限制。如果您遇到速度变慢或崩溃的情况，请尝试减少图像数量。

### 我可以调整单个图像的位置吗？

自由布局允许将每张图像拖动到画布上的任何位置。网格和杂志布局使用固定的定位规则。切换到自由布局模式以手动控制每张图像的放置。

### 输出是什么文件格式？

拼贴画默认保存为 PNG 图像以实现无损质量。您可以选择 JPEG 以获得较小的文件大小和有损压缩。格式选择可在下载前进行。