DeepSeek生成HTML5图片拼接工具
让DeepSeek生成一个HTML5图片拼接工具，给的提示词如下
提示词(prompt)
帮我生成一个可以将两张图片拼接到一起的程序 支持横向拼接和竖向拼接，可以用html5实现功能吗？
DeepSeek大概20秒左右就做好了，而且像这么简单的功能的话也没必要用python或者其他编程语言去生成，不然的话还得去配置运行环境，用HTML5直接用浏览器打开就可以了，最重要的是可以直接在DeepSeek生成的代码右边就可以直接点击运行了，连自己建一个html的文件都省去了，试了一下最终效果，还不错，任务算是完成了。
源码如下，可以新建一个html文件，源码直接复制进去双击打开即可。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 图片拼接工具</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 900px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
h1 {
color: #333;
text-align: center;
}
.container {
display: flex;
flex-direction: column;
gap: 20px;
}
.controls {
display: flex;
flex-wrap: wrap;
gap: 15px;
padding: 15px;
background: #f5f5f5;
border-radius: 5px;
}
.control-group {
display: flex;
flex-direction: column;
gap: 5px;
}
button {
padding: 8px 15px;
background: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background: #45a049;
}
select, input {
padding: 8px;
border-radius: 4px;
border: 1px solid #ddd;
}
.preview {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
#imageContainer {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 15px;
}
.thumbnail {
max-width: 150px;
max-height: 150px;
border: 1px solid #ddd;
position: relative;
}
.thumbnail img {
max-width: 100%;
max-height: 100%;
}
.remove-btn {
position: absolute;
top: 0;
right: 0;
background: red;
color: white;
border: none;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 12px;
cursor: pointer;
}
#resultCanvas {
max-width: 100%;
border: 1px solid #ddd;
margin-top: 15px;
display: none;
}
.download-btn {
background: #2196F3;
display: none;
}
.download-btn:hover {
background: #0b7dda;
}
</style>
</head>
<body>
<h1>HTML5 图片拼接工具</h1>
<div class="container">
<div class="controls">
<div class="control-group">
<label for="imageInput">选择图片：</label>
<input type="file" id="imageInput" accept="image/*" multiple>
</div>
<div class="control-group">
<label for="modeSelect">拼接方式：</label>
<select id="modeSelect">
<option value="horizontal">横向拼接</option>
<option value="vertical">竖向拼接</option>
</select>
</div>
<div class="control-group">
<label for="spacingInput">图片间距：</label>
<input type="number" id="spacingInput" value="0" min="0" max="100">
</div>
<div class="control-group">
<label for="bgColor">背景颜色：</label>
<input type="color" id="bgColor" value="#ffffff">
</div>
<button id="processBtn">拼接图片</button>
</div>
<div class="preview">
<div id="imageContainer"></div>
<canvas id="resultCanvas"></canvas>
<button id="downloadBtn" class="download-btn">下载拼接结果</button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const imageInput = document.getElementById('imageInput');
const modeSelect = document.getElementById('modeSelect');
const spacingInput = document.getElementById('spacingInput');
const bgColor = document.getElementById('bgColor');
const processBtn = document.getElementById('processBtn');
const imageContainer = document.getElementById('imageContainer');
const resultCanvas = document.getElementById('resultCanvas');
const downloadBtn = document.getElementById('downloadBtn');
let images = [];
// 处理图片选择
imageInput.addEventListener('change', function(e) {
const files = e.target.files;
if (files.length === 0) return;
images = [];
imageContainer.innerHTML = '';
for (let i = 0; i < files.length; i++) {
const file = files[i];
if (!file.type.match('image.*')) continue;
const reader = new FileReader();
reader.onload = function(e) {
const img = new Image();
img.onload = function() {
images.push(img);
addThumbnail(img, images.length - 1);
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
});
// 添加缩略图
function addThumbnail(img, index) {
const thumbnailDiv = document.createElement('div');
thumbnailDiv.className = 'thumbnail';
const thumbnailImg = document.createElement('img');
thumbnailImg.src = img.src;
const removeBtn = document.createElement('button');
removeBtn.className = 'remove-btn';
removeBtn.innerHTML = '×';
removeBtn.onclick = function() {
images.splice(index, 1);
imageContainer.removeChild(thumbnailDiv);
// 重新渲染所有缩略图以更新索引
imageContainer.innerHTML = '';
images.forEach((img, i) => addThumbnail(img, i));
};
thumbnailDiv.appendChild(thumbnailImg);
thumbnailDiv.appendChild(removeBtn);
imageContainer.appendChild(thumbnailDiv);
}
// 处理拼接按钮点击
processBtn.addEventListener('click', function() {
if (images.length < 2) {
alert('请至少选择两张图片');
return;
}
const mode = modeSelect.value;
const spacing = parseInt(spacingInput.value);
const backgroundColor = bgColor.value;
concatenateImages(images, mode, spacing, backgroundColor);
});
// 拼接图片
function concatenateImages(images, mode, spacing, bgColor) {
let totalWidth = 0;
let totalHeight = 0;
if (mode === 'horizontal') {
// 横向拼接：总宽度是所有图片宽度之和 + 间距，高度取最大高度
totalWidth = images.reduce((sum, img) => sum + img.width, 0) +
(images.length - 1) * spacing;
totalHeight = Math.max(...images.map(img => img.height));
} else {
// 竖向拼接：总高度是所有图片高度之和 + 间距，宽度取最大宽度
totalHeight = images.reduce((sum, img) => sum + img.height, 0) +
(images.length - 1) * spacing;
totalWidth = Math.max(...images.map(img => img.width));
}
// 设置canvas尺寸
resultCanvas.width = totalWidth;
resultCanvas.height = totalHeight;
const ctx = resultCanvas.getContext('2d');
// 填充背景色
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, totalWidth, totalHeight);
let x = 0;
let y = 0;
for (const img of images) {
ctx.drawImage(img, x, y);
if (mode === 'horizontal') {
x += img.width + spacing;
} else {
y += img.height + spacing;
}
}
// 显示结果和下载按钮
resultCanvas.style.display = 'block';
downloadBtn.style.display = 'inline-block';
}
// 处理下载按钮点击
downloadBtn.addEventListener('click', function() {
const link = document.createElement('a');
link.download = '拼接结果.png';
link.href = resultCanvas.toDataURL('image/png');
link.click();
});
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
