coder/image-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.2.4: 移除上传按钮，改为拖放上传；选中效果优化

Browse Source
This commit is contained in:
hubian
2026-04-21 13:09:55 +08:00
parent 1bf6d6448c
commit 8bdd18bdcf
2 changed files with 11 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app.py
View File

@@ -25,7 +25,7 @@ def index():
@app.route('/api/health') @app.route('/api/health')
def health(): def health():
return jsonify({'status': 'ok', 'version': '1.2.2', 'time': datetime.now().isoformat()}) return jsonify({'status': 'ok', 'version': '1.2.3', 'time': datetime.now().isoformat()})
@app.route('/api/save', methods=['POST']) @app.route('/api/save', methods=['POST'])
def save_image(): def save_image():
@@ -64,9 +64,9 @@ def list_images():
if __name__ == '__main__': if __name__ == '__main__':
print("=" * 50) print("=" * 50)
print("图片编辑器 - Image Editor v1.2.2") print("图片编辑器 - Image Editor v1.2.4")
print("=" * 50) print("=" * 50)
print("右侧面板始终显示，首页显示快捷入口") print("拖放图片上传，选中效果优化")
print(f"访问地址: http://localhost:19018") print(f"访问地址: http://localhost:19018")
print("=" * 50) print("=" * 50)
app.run(host='0.0.0.0', port=19018, debug=True) app.run(host='0.0.0.0', port=19018, debug=True)

34
templates/index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片编辑器 - Image Editor v1.2.3</title> <title>图片编辑器 - Image Editor v1.2.4</title>
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
<style> <style>
@@ -90,9 +90,6 @@
<!-- 功能按钮 --> <!-- 功能按钮 -->
<div class="mt-3 flex gap-2 flex-wrap"> <div class="mt-3 flex gap-2 flex-wrap">
<button onclick="setTool('upload')" id="tool-upload" class="tool-btn px-3 py-2 bg-gray-200 rounded-lg">
<i class="ri-upload-cloud-line mr-1"></i>上传图片
</button>
<button onclick="setTool('merge')" id="tool-merge" class="tool-btn px-3 py-2 bg-gray-200 rounded-lg"> <button onclick="setTool('merge')" id="tool-merge" class="tool-btn px-3 py-2 bg-gray-200 rounded-lg">
<i class="ri-stack-line mr-1"></i>合并图片 <i class="ri-stack-line mr-1"></i>合并图片
</button> </button>
@@ -127,7 +124,8 @@
<canvas id="mainCanvas"></canvas> <canvas id="mainCanvas"></canvas>
<div id="emptyHint" class="text-gray-400 text-center"> <div id="emptyHint" class="text-gray-400 text-center">
<i class="ri-image-add-line text-6xl"></i> <i class="ri-image-add-line text-6xl"></i>
<p class="mt-2">点击"上传图片"或拖放图片开始编辑</p> <p class="mt-2">拖动图片到此处上传</p>
<p class="text-sm mt-1">支持多张图片同时上传</p>
</div> </div>
</div> </div>
@@ -245,11 +243,6 @@
// 更新右侧配置面板内容（不隐藏） // 更新右侧配置面板内容（不隐藏）
showPanel(tool); showPanel(tool);
// 上传图片直接触发文件选择
if (tool === 'upload') {
document.getElementById('fileInput').click();
}
} }
// 显示右侧面板内容 // 显示右侧面板内容
@@ -266,18 +259,18 @@
// 获取各工具的配置面板内容 // 获取各工具的配置面板内容
function getPanelConfig(tool) { function getPanelConfig(tool) {
// 默认首页面板 <!-- 默认首页面板 -->
if (!tool || tool === 'home') { if (!tool || tool === 'home') {
return { return {
title: '欢迎使用', title: '欢迎使用',
content: ` content: `
<div class="space-y-4"> <div class="space-y-4">
<p class="text-sm text-gray-600">点击顶部功能按钮开始编辑图片</p> <p class="text-sm text-gray-600">点击顶部功能按钮开始编辑图片</p>
<div class="p-3 bg-blue-50 rounded-lg border-2 border-dashed border-blue-300 text-center">
<i class="ri-upload-cloud-2-line text-3xl text-blue-500"></i>
<p class="text-sm text-blue-600 mt-2">拖动图片到左侧画布区域上传</p>
</div>
<div class="grid grid-cols-2 gap-2"> <div class="grid grid-cols-2 gap-2">
<button onclick="setTool('upload')" class="p-3 bg-blue-50 rounded-lg hover:bg-blue-100 text-center">
<i class="ri-upload-cloud-line text-2xl text-blue-500"></i>
<p class="text-xs mt-1">上传图片</p>
</button>
<button onclick="setTool('merge')" class="p-3 bg-green-50 rounded-lg hover:bg-green-100 text-center"> <button onclick="setTool('merge')" class="p-3 bg-green-50 rounded-lg hover:bg-green-100 text-center">
<i class="ri-stack-line text-2xl text-green-500"></i> <i class="ri-stack-line text-2xl text-green-500"></i>
<p class="text-xs mt-1">合并图片</p> <p class="text-xs mt-1">合并图片</p>
@@ -318,17 +311,6 @@
} }
switch(tool) { switch(tool) {
case 'upload':
return {
title: '上传图片',
content: `
<p class="text-sm text-gray-600 mb-4">点击按钮选择图片，或直接拖放图片到画布区域</p>
<button onclick="document.getElementById('fileInput').click()" class="w-full px-4 py-3 bg-blue-500 text-white rounded-lg">
<i class="ri-upload-cloud-line mr-2"></i>选择图片
</button>
`,
actions: ''
};
case 'merge': case 'merge':
if (state.images.length < 2) { if (state.images.length < 2) {