【添加常用模板】多种尺寸照片在一张相片纸上排成一版

yibeijiu

应坛友需求（如何让几张不同一寸照在一张相片纸上排成一版 - 吾爱破解 - 52pojie.cn），编写了一个将照片重新排版的工具，多种尺寸排版，导出png，pdf    先这样吧，不想弄了，

=====================================================================

test： test_imgs.rar (653.37 KB, 下载次数: 204)

2025-6-6 22:04 上传

点击文件名下载附件

，之前版本源码开放测试结束，不再提供

R4版：更新方向 R4-photo_collage_tool.rar (11.02 KB, 下载次数: 18)

2025-6-22 16:26 上传

点击文件名下载附件

R5版：添加了一些模板和编辑功能（但好像还有点问题） R5-photo_collage_tool.rar (14.42 KB, 下载次数: 163)

2025-6-22 16:26 上传

点击文件名下载附件

=====================================================================

总所周知，平时我们用软件或者网站想打印一寸照片，我们排版后是下图这个样子的，他的好处就是有很多张一样的一寸照片、但是最近学校给学生打印一张照片贴在助学金申请表上，一个人只需要一张，按照上图就会浪费。而且作为辅导员的我也承担不起这么多相片纸。所以我想有什么办法能让8个同学或者10个同学（按实际尺寸为准）合在一张相片上，用一张相片纸打印出来从而实现消耗一张相片纸，打印出好几个同学的一寸照片

照片导入：	支持点击选择或拖拽上传多张照片
照片预览：	界面上展示已上传照片缩略图，可设置尺寸
纸张设置；	支持 A4、6寸、5寸、4寸、自定义纸张
拼图预览：	右下预览拼接后的布局，支持下载高清图
打印设置：	DPI 控制（150/300/600），页面边距、照片间距、背景色、边框线
模式选择：	三种模式： 多人拼接、多张重复、智能混合布局
布局信息：	实时显示布局行列、照片数量、空间利用率、节省成本
导出 PDF：	直接生成 PDF 文件以供打印店使用（选项可开）
UI 样式：	使用渐变 + 弹性布局，兼容移动端，界面美观清晰

图片上传（选择+拖拽）：

[XHTML] 纯文本查看 复制代码

<label class="file-input-label">
  &#128193; 选择多张照片
  <input type="file" id="photoInput" multiple accept="image/*" style="display: none;">
</label>

[XHTML] 纯文本查看 复制代码

function initDragDrop() {
  const dropZone = document.getElementById('dropZone');
  dropZone.addEventListener('drop', handleDrop);
}
function handleDrop(e) {
  const files = e.dataTransfer.files;
  selectedFiles = Array.from(files).filter(file => file.type.startsWith('image/'));
  loadImages();
}

拼图生成：

[Asm] 纯文本查看 复制代码

function generateCollage() {
  const canvas = document.getElementById('collageCanvas');
  const ctx = canvas.getContext('2d');
  const dpi = parseInt(document.getElementById('printDPI').value);
  const borderWidth = parseInt(document.getElementById('borderWidth').value);

  // canvas大小
  const pixelWidth = paperWidth * dpi / 25.4;
  const pixelHeight = paperHeight * dpi / 25.4;
  canvas.width = pixelWidth;
  canvas.height = pixelHeight;

  // 每张照片绘制
  for (let i = 0; i < loadedImages.length; i++) {
    const img = loadedImages[i];
    const x = ...; // 根据布局计算
    const y = ...;
    ctx.drawImage(img, x, y, photoWidthPx, photoHeightPx);

    // 可选网格线
    if (document.getElementById('showGrid').checked) {
      ctx.strokeStyle = '#888';
      ctx.strokeRect(x, y, photoWidthPx, photoHeightPx);
    }
  }
}

R5版本

R5

R3版本

R3

rayzju

EPSON的easy printer软件可以实现各种尺寸照片在各类纸张上的排版，可以试试

苏紫方璇

请将部分关键代码插在帖子中（即使是出售附件也需要）
本版块仅限分享编程技术和源码相关内容，发布帖子必须带上关键代码和具体功能介绍

jw8519888

挺实用的工具

pjpazx

不错，下载试试

nfslom

这个东西好，很实用啊

DrCatcher

很实用啊

daoye9988

可以自由排版还是方便

思念曹操

不错，为楼主点赞，加币

bobo520

这个不错！

gst

这个不错，很棒！

Liebesfreud

感谢大佬分享，很实用的工具