夜雨聆风
在Web端处理文档生成任务时，将多张图片合并为一个PDF文件是常见需求，其应用场景覆盖电子相册、作品集、扫描件归档等。本文构建一个完整、可运行的HTML工具，它不仅支持图片的上传、预览、拖拽排序，还通过jsPDF与Canvas实现高质量PDF导出。核心设计兼顾用户体验与性能，对图片格式统一、内存管理、页面适配等关键问题给出了实用解法。
完整代码
<!DOCTYPE html>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<title>图片合并PDF工具</title>
<!-- jsPDF CDN -->
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js">
</script>
<!-- Sortable.js CDN (拖拽排序) -->
<scriptsrc="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js">
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: #f0f4ff;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.app {
max-width: 1100px;
width: 100%;
background: #ffffff;
border-radius: 24px;
box-shadow: 020px60pxrgba(91, 127, 255, 0.15);
padding: 32px36px40px;
transition: box-shadow 0.3s;
}
.app-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.app-header.icon {
font-size: 32px;
line-height: 1;
}
.app-headerh1 {
font-size: 26px;
font-weight: 700;
color: #1a2332;
letter-spacing: -0.5px;
}
.app-header.sub {
margin-left: auto;
font-size: 14px;
color: #8b9ab5;
background: #f0f4ff;
padding: 4px16px;
border-radius: 30px;
font-weight: 500;
}
.drop-zone {
border: 2.5px dashed #d0d9e8;
border-radius: 18px;
padding: 48px20px;
text-align: center;
cursor: pointer;
transition: all 0.25s ease;
background: #fafcff;
position: relative;
}
.drop-zone:hover,
.drop-zone.dragover {
border-color: #5b7fff;
background: #f0f6ff;
transform: scale(1.005);
}
.drop-zone.upload-icon {
font-size: 52px;
display: block;
margin-bottom: 12px;
}
.drop-zone.main-text {
font-size: 18px;
font-weight: 600;
color: #1a2332;
}
.drop-zone.sub-text {
font-size: 14px;
color: #8b9ab5;
margin-top: 6px;
}
.drop-zone.hint {
font-size: 13px;
color: #b0c0d8;
margin-top: 12px;
background: #f0f4ff;
display: inline-block;
padding: 4px18px;
border-radius: 30px;
}
.drop-zoneinput[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.toolbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 24px;
margin-bottom: 18px;
flex-wrap: wrap;
gap: 12px;
}
.toolbar.info {
font-size: 15px;
color: #1a2332;
font-weight: 500;
background: #f0f4ff;
padding: 6px18px;
border-radius: 30px;
}
.toolbar.infospan {
font-weight: 700;
color: #5b7fff;
}
.toolbar.actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px24px;
border: none;
border-radius: 40px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
background: #f0f4ff;
color: #1a2332;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 06px20pxrgba(0, 0, 0, 0.06);
}
.btn:active {
transform: translateY(0);
}
.btn-primary {
background: #5b7fff;
color: #fff;
box-shadow: 04px14pxrgba(91, 127, 255, 0.30);
}
.btn-primary:hover {
background: #4a6de8;
box-shadow: 08px24pxrgba(91, 127, 255, 0.40);
}
.btn-primary:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.btn-danger {
background: #fee8e8;
color: #c0392b;
}
.btn-danger:hover {
background: #fdd5d5;
}
.btn-outline {
background: transparent;
border: 1.5px solid #d0d9e8;
}
.btn-outline:hover {
border-color: #5b7fff;
color: #5b7fff;
background: #f0f6ff;
}
.image-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 16px;
margin-top: 6px;
min-height: 80px;
padding: 6px2px;
}
.image-grid-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #b0c0d8;
font-size: 15px;
padding: 40px0;
grid-column: 1 / -1;
}
.image-grid-empty.empty-icon {
font-size: 48px;
margin-bottom: 10px;
opacity: 0.6;
}
.image-card {
background: #ffffff;
border-radius: 16px;
box-shadow: 02px12pxrgba(0, 0, 0, 0.04);
border: 1px solid #eef2f8;
overflow: hidden;
position: relative;
transition: all 0.2s ease;
cursor: grab;
user-select: none;
}
.image-card:hover {
box-shadow: 08px28pxrgba(0, 0, 0, 0.08);
border-color: #d0d9e8;
}
.image-card.sortable-ghost {
opacity: 0.3;
border-color: #5b7fff;
transform: scale(0.96);
}
.image-card.card-thumb {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
background: #f5f8ff;
}
.image-card.card-index {
position: absolute;
top: 8px;
left: 8px;
background: rgba(26, 35, 50, 0.72);
backdrop-filter: blur(6px);
color: #fff;
font-size: 12px;
font-weight: 700;
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0.5px;
box-shadow: 02px8pxrgba(0, 0, 0, 0.12);
}
.image-card.card-name {
padding: 10px12px8px;
font-size: 13px;
font-weight: 500;
color: #1a2332;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: #fafcff;
border-top: 1px solid #f0f4ff;
}
.image-card.card-size {
padding: 012px10px;
font-size: 11px;
color: #a0b0c8;
background: #fafcff;
}
.image-card.card-delete {
position: absolute;
top: 8px;
right: 8px;
width: 28px;
height: 28px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(6px);
color: #e74c3c;
font-size: 16px;
line-height: 1;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 02px8pxrgba(0, 0, 0, 0.06);
font-weight: 700;
}
.image-card.card-delete:hover {
background: #fee8e8;
transform: scale(1.08);
}
.image-card.drag-handle {
position: absolute;
bottom: 8px;
right: 8px;
color: #b0c0d8;
font-size: 14px;
cursor: grab;
opacity: 0.5;
transition: opacity 0.2s;
background: rgba(255, 255, 255, 0.7);
padding: 2px6px;
border-radius: 12px;
backdrop-filter: blur(4px);
}
.image-card:hover.drag-handle {
opacity: 0.9;
}
.loading-overlay {
position: fixed;
inset: 0;
background: rgba(26, 35, 50, 0.55);
backdrop-filter: blur(6px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.loading-overlay.active {
opacity: 1;
pointer-events: auto;
}
.loading-box {
background: #ffffff;
padding: 40px48px36px;
border-radius: 24px;
box-shadow: 030px80pxrgba(0, 0, 0, 0.25);
text-align: center;
max-width: 400px;
width: 90%;
}
.loading-box.spinner {
display: inline-block;
width: 52px;
height: 52px;
border-radius: 50%;
border: 4px solid #eef2f8;
border-top-color: #5b7fff;
animation: spin 0.9s linear infinite;
margin-bottom: 18px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.loading-box.load-title {
font-size: 20px;
font-weight: 700;
color: #1a2332;
}
.loading-box.load-desc {
font-size: 14px;
color: #8b9ab5;
margin-top: 6px;
}
.loading-box.load-progress {
margin-top: 18px;
height: 6px;
background: #eef2f8;
border-radius: 10px;
overflow: hidden;
}
.loading-box.load-progress.bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #5b7fff, #7c99ff);
border-radius: 10px;
transition: width 0.3s ease;
}
@media (max-width: 700px) {
.app { padding: 20px18px28px; }
.app-headerh1 { font-size: 21px; }
.app-header.sub { font-size: 12px; padding: 2px12px; }
.drop-zone { padding: 32px16px; }
.drop-zone.upload-icon { font-size: 40px; }
.drop-zone.main-text { font-size: 16px; }
.image-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.btn { padding: 8px18px; font-size: 14px; }
.toolbar { flex-direction: column; align-items: stretch; }
.toolbar.actions { justify-content: stretch; }
.toolbar.actions.btn { flex: 1; justify-content: center; }
.loading-box { padding: 28px20px24px; }
}
@media (max-width: 480px) {
.image-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.app-header.icon { font-size: 26px; }
.app-headerh1 { font-size: 18px; }
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f0f4ff; border-radius: 10px; }
::-webkit-scrollbar-thumb { background: #d0d9e8; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #b0c0d8; }
</style>
</head>
<body>
<divclass="app"id="app">
<headerclass="app-header">
<spanclass="icon">📄</span>
<h1>图片合并 PDF</h1>
<spanclass="sub">拖拽排序 · 一键导出</span>
</header>
<divclass="drop-zone"id="dropZone">
<spanclass="upload-icon">🖼️</span>
<divclass="main-text">点击上传或拖拽图片到此处</div>
<divclass="sub-text">支持 JPG / PNG / BMP / WebP 等格式</div>
<divclass="hint">📎 可选择多张图片，按顺序合并</div>
<inputtype="file"id="fileInput"accept="image/*"multiple />
</div>
<divclass="toolbar">
<divclass="info">📦 已上传 <spanid="imageCount">0</span> 张</div>
<divclass="actions">
<buttonclass="btn btn-outline"id="clearBtn"disabled>🗑️ 清空</button>
<buttonclass="btn btn-primary"id="mergeBtn"disabled>📥 合并 PDF</button>
</div>
</div>
<divclass="image-grid"id="imageGrid">
<divclass="image-grid-empty">
<spanclass="empty-icon">🖼️</span>
<span>暂无图片，请上传</span>
</div>
</div>
</div>
<divclass="loading-overlay"id="loadingOverlay">
<divclass="loading-box">
<divclass="spinner"></div>
<divclass="load-title"id="loadTitle">正在生成 PDF…</div>
<divclass="load-desc"id="loadDesc">请稍候，正在处理图片</div>
<divclass="load-progress">
<divclass="bar"id="progressBar"></div>
</div>
</div>
</div>
<script>
(function() {
'use strict';
const state = { images: [], idCounter: 0 };
const dropZone = document.getElementById('dropZone');
const fileInput = document.getElementById('fileInput');
const imageGrid = document.getElementById('imageGrid');
const imageCount = document.getElementById('imageCount');
const mergeBtn = document.getElementById('mergeBtn');
const clearBtn = document.getElementById('clearBtn');
const loadingOverlay = document.getElementById('loadingOverlay');
const loadTitle = document.getElementById('loadTitle');
const loadDesc = document.getElementById('loadDesc');
const progressBar = document.getElementById('progressBar');
functionformatFileSize(bytes) {
if (bytes < 1024) return bytes + ' B';
if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
return (bytes / 1048576).toFixed(1) + ' MB';
}
functionreadFileAsDataURL(file) {
returnnewPromise((resolve, reject) => {
const reader = newFileReader();
reader.onload = () =>resolve(reader.result);
reader.onerror = () =>reject(reader.error);
reader.readAsDataURL(file);
});
}
functiongetImageDimensions(dataURL) {
returnnewPromise((resolve, reject) => {
const img = newImage();
img.onload = () =>resolve({ width: img.width, height: img.height });
img.onerror = () =>reject(newError('图片加载失败'));
img.src = dataURL;
});
}
functionconvertToJPEG(dataURL, quality = 0.92) {
returnnewPromise((resolve, reject) => {
const img = newImage();
img.onload = function() {
try {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
resolve(canvas.toDataURL('image/jpeg', quality));
} catch (err) { reject(err); }
};
img.onerror = () =>reject(newError('图片转换失败'));
img.src = dataURL;
});
}
functionrender() {
const items = state.images;
const count = items.length;
imageCount.textContent = count;
mergeBtn.disabled = count === 0;
clearBtn.disabled = count === 0;
imageGrid.innerHTML = '';
if (count === 0) {
imageGrid.innerHTML = `
<div class="image-grid-empty">
<span class="empty-icon">🖼️</span>
<span>暂无图片，请上传</span>
</div>
`;
return;
}
items.forEach((img, index) => {
const card = document.createElement('div');
card.className = 'image-card';
card.dataset.id = img.id;
const thumb = document.createElement('img');
thumb.className = 'card-thumb';
thumb.src = img.dataURL;
thumb.alt = img.name;
thumb.loading = 'lazy';
const indexBadge = document.createElement('div');
indexBadge.className = 'card-index';
indexBadge.textContent = index + 1;
const nameDiv = document.createElement('div');
nameDiv.className = 'card-name';
nameDiv.textContent = img.name;
const sizeDiv = document.createElement('div');
sizeDiv.className = 'card-size';
sizeDiv.textContent = `${img.width}×${img.height} · ${formatFileSize(img.fileSize)}`;
const delBtn = document.createElement('button');
delBtn.className = 'card-delete';
delBtn.innerHTML = '×';
delBtn.title = '删除此图片';
delBtn.addEventListener('click', (e) => {
e.stopPropagation();
deleteImage(img.id);
});
const handle = document.createElement('div');
handle.className = 'drag-handle';
handle.textContent = '⠿';
handle.title = '拖拽调整顺序';
card.appendChild(thumb);
card.appendChild(indexBadge);
card.appendChild(nameDiv);
card.appendChild(sizeDiv);
card.appendChild(delBtn);
card.appendChild(handle);
imageGrid.appendChild(card);
});
initSortable();
}
let sortableInstance = null;
functioninitSortable() {
if (sortableInstance) { sortableInstance.destroy(); sortableInstance = null; }
if (state.images.length === 0) return;
sortableInstance = newSortable(imageGrid, {
animation: 200,
easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
handle: '.drag-handle',
ghostClass: 'sortable-ghost',
onEnd: function(evt) {
constfrom = evt.oldIndex;
const to = evt.newIndex;
if (from === to) return;
const moved = state.images.splice(from, 1)[0];
state.images.splice(to, 0, moved);
render();
},
});
}
asyncfunctionuploadImages(files) {
const validFiles = [];
for (const file of files) {
if (!file.type.startsWith('image/')) continue;
validFiles.push(file);
}
if (validFiles.length === 0) {
showToast('⚠️ 未选择有效的图片文件', 'warning');
return;
}
for (const file of validFiles) {
try {
const dataURL = awaitreadFileAsDataURL(file);
const dims = awaitgetImageDimensions(dataURL);
const jpegData = awaitconvertToJPEG(dataURL, 0.92);
state.images.push({
id: ++state.idCounter,
dataURL: jpegData,
name: file.name || `image_${state.idCounter}.jpg`,
width: dims.width,
height: dims.height,
fileSize: file.size,
});
imageCount.textContent = state.images.length;
} catch (err) {
console.warn('跳过图片:', file.name, err);
}
}
render();
showToast(`✅ 成功上传 ${state.images.length} 张图片`, 'success');
}
functiondeleteImage(id) {
const idx = state.images.findIndex(img => img.id === id);
if (idx === -1) return;
state.images.splice(idx, 1);
render();
if (state.images.length === 0) showToast('已清空所有图片', 'info');
}
functionclearAll() {
if (state.images.length === 0) return;
if (!confirm('确定要清空所有图片吗？')) return;
state.images = [];
render();
showToast('已清空所有图片', 'info');
}
asyncfunctionmergeToPDF() {
const count = state.images.length;
if (count === 0) {
showToast('⚠️ 请先上传图片', 'warning');
return;
}
loadingOverlay.classList.add('active');
loadTitle.textContent = '正在生成 PDF…';
loadDesc.textContent = `共 ${count} 张图片，请稍候`;
progressBar.style.width = '0%';
try {
const { jsPDF } = window.jspdf;
const pdf = newjsPDF('p', 'mm', 'a4');
const pageWidth = pdf.internal.pageSize.getWidth();
const pageHeight = pdf.internal.pageSize.getHeight();
const margin = 8;
for (let i = 0; i < count; i++) {
const pct = ((i / count) * 100).toFixed(0);
progressBar.style.width = pct + '%';
loadDesc.textContent = `正在处理第 ${i + 1}/${count} 张图片`;
const img = state.images[i];
const imgObj = newImage();
imgObj.src = img.dataURL;
awaitnewPromise((resolve, reject) => {
imgObj.onload = resolve;
imgObj.onerror = reject;
});
const maxW = pageWidth - margin * 2;
const maxH = pageHeight - margin * 2;
const ratio = Math.min(maxW / imgObj.width, maxH / imgObj.height, 1);
let drawW = imgObj.width * ratio;
let drawH = imgObj.height * ratio;
if (ratio >= 1) {
drawW = Math.min(imgObj.width, maxW);
drawH = Math.min(imgObj.height, maxH);
if (imgObj.width > maxW || imgObj.height > maxH) {
const r2 = Math.min(maxW / imgObj.width, maxH / imgObj.height);
drawW = imgObj.width * r2;
drawH = imgObj.height * r2;
}
}
const x = (pageWidth - drawW) / 2;
const y = (pageHeight - drawH) / 2;
if (i > 0) pdf.addPage();
pdf.addImage(img.dataURL, 'JPEG', x, y, drawW, drawH);
}
progressBar.style.width = '100%';
loadDesc.textContent = '✅ PDF 生成完成，即将下载';
const now = newDate();
const ts = `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}-${String(now.getDate()).padStart(2,'0')}`;
const fileName = `合并图片_${ts}.pdf`;
pdf.save(fileName);
awaitnewPromise(r =>setTimeout(r, 600));
} catch (err) {
console.error('PDF 生成失败:', err);
loadTitle.textContent = '❌ 生成失败';
loadDesc.textContent = err.message || '未知错误，请重试';
awaitnewPromise(r =>setTimeout(r, 1500));
} finally {
loadingOverlay.classList.remove('active');
progressBar.style.width = '0%';
}
}
functionshowToast(msg, type = 'info') {
const old = document.querySelector('.custom-toast');
if (old) old.remove();
const toast = document.createElement('div');
toast.className = 'custom-toast';
toast.textContent = msg;
Object.assign(toast.style, {
position: 'fixed',
bottom: '30px',
left: '50%',
transform: 'translateX(-50%)',
background: type === 'warning' ? '#f39c12' :
type === 'success' ? '#2ecc71' :
type === 'error' ? '#e74c3c' : '#34495e',
color: '#fff',
padding: '12px 28px',
borderRadius: '40px',
fontSize: '15px',
fontWeight: '600',
boxShadow: '0 8px 30px rgba(0,0,0,0.18)',
zIndex: '1000',
maxWidth: '90%',
textAlign: 'center',
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
opacity: '0',
transition: 'opacity 0.4s ease, transform 0.4s ease',
transform: 'translateX(-50%) translateY(20px)',
pointerEvents: 'none',
});
document.body.appendChild(toast);
requestAnimationFrame(() => {
toast.style.opacity = '1';
toast.style.transform = 'translateX(-50%) translateY(0)';
});
setTimeout(() => {
toast.style.opacity = '0';
toast.style.transform = 'translateX(-50%) translateY(20px)';
setTimeout(() => toast.remove(), 400);
}, 2800);
}
fileInput.addEventListener('change', (e) => {
if (e.target.files.length > 0) {
uploadImages(e.target.files);
}
fileInput.value = '';
});
dropZone.addEventListener('dragover', (e) => {
e.preventDefault();
dropZone.classList.add('dragover');
});
dropZone.addEventListener('dragleave', (e) => {
e.preventDefault();
dropZone.classList.remove('dragover');
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
dropZone.classList.remove('dragover');
if (e.dataTransfer.files.length > 0) {
uploadImages(e.dataTransfer.files);
}
});
dropZone.addEventListener('click', (e) => {
if (e.target.tagName === 'INPUT') return;
fileInput.click();
});
mergeBtn.addEventListener('click', mergeToPDF);
clearBtn.addEventListener('click', clearAll);
document.addEventListener('keydown', (e) => {
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
e.preventDefault();
if (!mergeBtn.disabled) mergeBtn.click();
}
});
render();
if (window.File && window.FileReader && window.FileList) { } else {
showToast('⚠️ 您的浏览器不支持此功能，请使用现代浏览器', 'warning');
}
})();
</script>
</body>
</html>技术剖析与设计考量
浏览器端生成PDF并非简单地将图片“粘贴”进文档，而是涉及图像解码、尺寸适配、压缩编码以及内存管理等一系列底层操作。本工具以jsPDF为PDF生成引擎，但jsPDF的addImage方法接受DataURL或Image对象，其内部依赖Canvas绘制。为了确保兼容性，我们先将所有图片通过Canvas转换为JPEG格式，JPEG是PDF规范中最广泛支持的图像格式，且可调节压缩质量（本工具设为0.92），在文件大小与视觉保真度间取得平衡。这一转换过程的数学本质是离散余弦变换（DCT）与量化，但使用者无需关心细节，我们将其封装在convertToJPEG函数中。
PDF页面尺寸固定为A4（），每张图片独立成页，且需居中显示。这里的关键在于计算图片在页面上的绘制尺寸。设图片原始宽度为 ，高度为 ，页面可用宽度为 ，可用高度为 ，其中 为边距。缩放比例 取 ，使得图片在不超出页面的前提下尽可能放大，但不会超过原始尺寸（即不放大模糊）。最终绘制尺寸为 ，，左上角坐标 ，，实现完美居中。代码中还额外处理了图片本身小于页面但宽高比导致某一维度超出的情况，确保所有图片均完整可见。
拖拽排序采用Sortable.js库，其通过CSS transform实现平滑动画。我们将其限制在.drag-handle元素上，避免误触。排序完成后，底层数组state.images重新排列并触发重新渲染，序号自动更新，PDF输出的顺序也随之同步。这一过程体现了“数据驱动视图”的思想，所有UI状态均由state派生，保证一致性。
上传流程采用异步流式处理，每张图片经历读取、解码、转换、存储四个阶段。为了提升用户体验，我们实时更新计数，并在合并时显示加载遮罩与进度条。进度计算基于循环索引，虽然实际PDF生成耗时远低于图像转换，但进度反馈能有效缓解用户焦虑。键盘快捷键（Ctrl+Enter）的加入进一步提升了操作效率，符合专业工具的习惯。
内存管理方面，所有图片数据以DataURL形式保存在内存中，对于大量图片可能引发内存压力。但考虑到浏览器端通常处理几十张以内的图片，且DataURL经过JPEG压缩后体积可控，此设计足以满足常见需求。若需优化，可考虑将图片转为Blob URL或使用IndexedDB缓存，但会牺牲简便性。
最后，界面设计采用毛玻璃效果、柔和阴影与圆角卡片，视觉上贴近现代应用审美。响应式布局适配移动设备，确保在手机端也能完成上传与合并操作。整个工具无需任何后端服务，完全运行于客户端，保护用户数据隐私，这也是Web端文档处理的一大优势。
通过上述实现，我们获得了一个功能完备、代码健壮且易于扩展的图片合并PDF工具。其核心逻辑可复用于电子发票合并、扫描件整理、报告生成等更复杂的业务场景，仅需在此基础上调整页面尺寸、添加水印或元数据即可。
陪伴是最长情的告白
为你推送最实用的资讯
识别二维码 关注我们
