<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片拼接器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #2f3b2f;
color: #f5f5f5;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 20px;
flex-direction: column;
overflow-x: hidden;
}
.container {
background-color: #1e2a1e;
padding: 30px;
border-radius: 15px;
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 700px;
text-align: center;
overflow: hidden;
}
h1 {
font-size: 32px;
margin-bottom: 20px;
color: #a7c7a7;
}
.upload-section {
margin-bottom: 30px;
}
.upload-label {
display: block;
font-size: 18px;
margin-bottom: 12px;
color: #a7c7a7;
}
input[type="file"] {
font-size: 16px;
padding: 12px;
border-radius: 8px;
border: 1px solid #8c9c8c;
background-color: #3b4f3b;
color: #f5f5f5;
width: 100%;
cursor: pointer;
}
.options {
margin-bottom: 20px;
text-align: left;
}
.options label {
display: block;
margin: 12px 0;
font-size: 18px;
color: #a7c7a7;
}
input[type="number"], input[type="color"], select {
width: 100%;
padding: 12px;
font-size: 16px;
margin-bottom: 15px;
border-radius: 8px;
border: 1px solid #8c9c8c;
background-color: #3b4f3b;
color: #f5f5f5;
}
.button {
background-color: #5a7a4e;
color: white;
border: none;
padding: 14px 26px;
font-size: 18px;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #4a6a3f;
}
.result-container {
margin-top: 20px;
min-height: 300px;
background-color: #2b3b2b;
padding: 15px;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.download-section {
margin-top: 20px;
}
.download-section button {
background-color: #9acd32;
color: white;
padding: 12px 24px;
font-size: 16px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.download-section button:hover {
background-color: #7f9c28;
}
/* Mobile responsiveness */
@media (max-width: 600px) {
.container {
padding: 20px;
width: 100%;
max-width: none;
}
h1 {
font-size: 24px;
}
.upload-label, .options label {
font-size: 16px;
}
input[type="file"], input[type="number"], input[type="color"], select {
font-size: 14px;
padding: 10px;
}
.button, .download-section button {
padding: 12px 20px;
font-size: 14px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>图片拼接器</h1>
<!-- 图片上传部分 -->
<div class="upload-section">
<label for="imageUpload" class="upload-label">上传图片（多选）</label>
<input type="file" id="imageUpload" multiple accept="image/*">
</div>
<!-- 设置拼接选项 -->
<div class="options">
<label for="direction">拼接方向：</label>
<select id="direction">
<option value="horizontal">横向拼接</option>
<option value="vertical">纵向拼接</option>
</select>
<label for="spacing">间隔（像素）：</label>
<input type="number" id="spacing" value="10">
<label for="spacingColor">间隔颜色：</label>
<input type="color" id="spacingColor" value="#000000">
<label for="backgroundColor">背景颜色：</label>
<input type="color" id="backgroundColor" value="#ffffff">
<label for="fileName">下载文件名（不带后缀）：</label>
<input type="text" id="fileName" value="下载图片">
</div>
<!-- 下载按钮（在拼接按钮上面） -->
<div class="download-section">
<button id="downloadButton" class="button" style="display: none;">下载拼接图片</button>
</div>
<!-- 拼接按钮 -->
<button id="createButton" class="button">拼接图片</button>
<!-- 显示拼接结果 -->
<div id="resultContainer" class="result-container"></div>
</div>
<script>
document.getElementById('imageUpload').addEventListener('change', handleImageUpload);
document.getElementById('createButton').addEventListener('click', updateResult);
document.getElementById('spacing').addEventListener('input', updateResult);
document.getElementById('spacingColor').addEventListener('input', updateResult);
document.getElementById('backgroundColor').addEventListener('input', updateResult);
let images = [];
function handleImageUpload(event) {
const files = event.target.files;
images = [];
const resultContainer = document.getElementById('resultContainer');
resultContainer.innerHTML = '';
document.getElementById('downloadButton').style.display = 'none';
for (let i = 0; i < files.length; i++) {
const file = files[i];
const reader = new FileReader();
reader.onload = function (e) {
images.push(e.target.result);
};
reader.readAsDataURL(file);
}
}
function updateResult() {
if (images.length === 0) {
alert('请上传图片!');
return;
}
const direction = document.getElementById('direction').value;
const spacing = parseInt(document.getElementById('spacing').value);
const spacingColor = document.getElementById('spacingColor').value;
const backgroundColor = document.getElementById('backgroundColor').value;
const resultContainer = document.getElementById('resultContainer');
resultContainer.style.backgroundColor = backgroundColor;
resultContainer.innerHTML = '';
const container = document.createElement('div');
container.style.display = direction === 'horizontal' ? 'flex' : 'block';
container.style.gap = `${spacing}px`;
images.forEach(src => {
const img = document.createElement('img');
img.src = src;
img.style.margin = '0';
img.style.objectFit = 'cover';
img.style.maxHeight = '100%';
img.style.maxWidth = '100%';
img.style.borderRadius = '8px';
container.appendChild(img);
});
resultContainer.appendChild(container);
// Show the download button
document.getElementById('downloadButton').style.display = 'inline-block';
// Enable the download button
document.getElementById('downloadButton').addEventListener('click', () => downloadImage(container));
}
// Download the resulting image
function downloadImage(container) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const direction = document.getElementById('direction').value;
const spacing = parseInt(document.getElementById('spacing').value);
let width = 0;
let height = 0;
container.querySelectorAll('img').forEach(img => {
width += img.naturalWidth + spacing;
height = Math.max(height, img.naturalHeight);
});
if (direction === 'vertical') {
[width, height] = [height, width];
}
canvas.width = width;
canvas.height = height;
let x = 0;
let y = 0;
container.querySelectorAll('img').forEach(img => {
ctx.drawImage(img, x, y);
x += img.naturalWidth + spacing;
if (direction === 'vertical') {
y += img.naturalHeight + spacing;
}
});
const fileName = document.getElementById('fileName').value || '下载图片';
const link = document.createElement('a');
link.href = canvas.toDataURL('image/jpeg');
link.download = fileName; // No file extension
link.click();
}
</script>
</body>
</html>
index.html
index.html