让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>
