当前位置：首页 > news >正文

DeepSeek生成HTML5图片拼接工具

news 来源：原创 2025/6/22 6:36:47

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