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

v1.2.5: 修复操作后面板判断问题

Browse Source
This commit is contained in:
hubian
2026-04-21 16:29:33 +08:00
parent 8bdd18bdcf
commit 6db10c0c83
3 changed files with 25 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app.py
View File

@@ -1,7 +1,7 @@
""" """
图片编辑器 - Image Editor v1.2.3 图片编辑器 - Image Editor v1.2.5
前端图片处理工具：合并、分割、挖孔填充、圆形切图、文字图片等 前端图片处理工具：合并、分割、挖孔填充、圆形切图、文字图片等
v1.2.3: 执行操作后保持当前配置面板 v1.2.5: 修复操作后面板判断问题
端口: 19018 端口: 19018
""" """
@@ -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.3', 'time': datetime.now().isoformat()}) return jsonify({'status': 'ok', 'version': '1.2.5', '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.4") print("图片编辑器 - Image Editor v1.2.5")
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)

BIN
outputs/edited_1776755761871.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 763 KiB

35
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.4</title> <title>图片编辑器 - Image Editor v1.2.5</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>
@@ -190,7 +190,10 @@
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
const container = document.getElementById('canvasContainer'); const container = document.getElementById('canvasContainer');
// 返回首页面板 // 检查是否有图片（画布有内容）
function hasImage() {
return state.images.length > 0 || document.getElementById('emptyHint').classList.contains('hidden');
}
function goHome() { function goHome() {
document.querySelectorAll('.tool-btn').forEach(btn => btn.classList.remove('active')); document.querySelectorAll('.tool-btn').forEach(btn => btn.classList.remove('active'));
state.currentTool = null; state.currentTool = null;
@@ -313,7 +316,7 @@
switch(tool) { switch(tool) {
case 'merge': case 'merge':
if (state.images.length < 2) { if (!hasImage() || state.images.length < 2) {
return { return {
title: '合并图片', title: '合并图片',
content: `<p class="text-sm text-red-500">请先上传至少2张图片</p>`, content: `<p class="text-sm text-red-500">请先上传至少2张图片</p>`,
@@ -390,7 +393,7 @@
}; };
case 'split': case 'split':
if (state.images.length === 0) { if (!hasImage()) {
return { return {
title: '分割图片', title: '分割图片',
content: `<p class="text-sm text-red-500">请先上传图片</p>`, content: `<p class="text-sm text-red-500">请先上传图片</p>`,
@@ -421,7 +424,7 @@
}; };
case 'hole': case 'hole':
if (state.images.length === 0) { if (!hasImage()) {
return { return {
title: '挖孔填充', title: '挖孔填充',
content: `<p class="text-sm text-red-500">请先上传图片</p>`, content: `<p class="text-sm text-red-500">请先上传图片</p>`,
@@ -467,7 +470,7 @@
}; };
case 'circle': case 'circle':
if (state.images.length === 0) { if (!hasImage()) {
return { return {
title: '圆形切图', title: '圆形切图',
content: `<p class="text-sm text-red-500">请先上传图片</p>`, content: `<p class="text-sm text-red-500">请先上传图片</p>`,
@@ -553,7 +556,7 @@
}; };
case 'resize': case 'resize':
if (state.images.length === 0) { if (!hasImage()) {
return { return {
title: '调整大小', title: '调整大小',
content: `<p class="text-sm text-red-500">请先上传图片</p>`, content: `<p class="text-sm text-red-500">请先上传图片</p>`,
@@ -584,7 +587,7 @@
}; };
case 'crop': case 'crop':
if (state.images.length === 0) { if (!hasImage()) {
return { return {
title: '裁剪', title: '裁剪',
content: `<p class="text-sm text-red-500">请先上传图片</p>`, content: `<p class="text-sm text-red-500">请先上传图片</p>`,
@@ -854,6 +857,8 @@
updateImageList(); updateImageList();
hideEmptyHint(); hideEmptyHint();
saveState('加载: ' + name); saveState('加载: ' + name);
// 刷新当前面板
refreshCurrentPanel();
}; };
img.src = dataUrl; img.src = dataUrl;
} }
@@ -878,7 +883,7 @@
const list = document.getElementById('imageList'); const list = document.getElementById('imageList');
const items = document.getElementById('imageItems'); const items = document.getElementById('imageItems');
document.getElementById('imageCount').textContent = `(${state.images.length}张)`; document.getElementById('imageCount').textContent = `(${state.images.length}张)`;
if (state.images.length === 0) { list.classList.add('hidden'); return; } if (!hasImage()) { list.classList.add('hidden'); return; }
list.classList.remove('hidden'); list.classList.remove('hidden');
items.innerHTML = ''; items.innerHTML = '';
state.images.forEach((item, index) => { state.images.forEach((item, index) => {
@@ -898,7 +903,7 @@
drawCanvas(); drawCanvas();
updateImageList(); updateImageList();
saveState('移除图片'); saveState('移除图片');
if (state.images.length === 0) showEmptyHint(); if (!hasImage()) showEmptyHint();
} }
function hideEmptyHint() { function hideEmptyHint() {
@@ -979,7 +984,7 @@
}); });
const mergedData = canvas.toDataURL('image/png'); const mergedData = canvas.toDataURL('image/png');
state.images = []; hideEmptyHint(); state.images = [];
loadImage(mergedData, 'merged'); loadImage(mergedData, 'merged');
refreshCurrentPanel(); refreshCurrentPanel();
} }
@@ -1157,7 +1162,7 @@
ctx.drawImage(circleCanvas, 0, 0); ctx.drawImage(circleCanvas, 0, 0);
const circleData = canvas.toDataURL('image/png'); const circleData = canvas.toDataURL('image/png');
state.images = []; hideEmptyHint(); state.images = [];
loadImage(circleData, 'circle'); loadImage(circleData, 'circle');
refreshCurrentPanel(); refreshCurrentPanel();
} }
@@ -1208,7 +1213,7 @@
}); });
const textData = canvas.toDataURL('image/png'); const textData = canvas.toDataURL('image/png');
state.images = []; hideEmptyHint(); state.images = [];
loadImage(textData, 'text'); loadImage(textData, 'text');
refreshCurrentPanel(); refreshCurrentPanel();
} }
@@ -1226,7 +1231,7 @@
ctx.drawImage(img.img, 0, 0, newWidth, newHeight); ctx.drawImage(img.img, 0, 0, newWidth, newHeight);
const resizedData = canvas.toDataURL('image/png'); const resizedData = canvas.toDataURL('image/png');
state.images = []; hideEmptyHint(); state.images = [];
loadImage(resizedData, 'resized'); loadImage(resizedData, 'resized');
refreshCurrentPanel(); refreshCurrentPanel();
} }
@@ -1246,7 +1251,7 @@
ctx.drawImage(img.img, x, y, w, h, 0, 0, w, h); ctx.drawImage(img.img, x, y, w, h, 0, 0, w, h);
const croppedData = canvas.toDataURL('image/png'); const croppedData = canvas.toDataURL('image/png');
state.images = []; hideEmptyHint(); state.images = [];
loadImage(croppedData, 'cropped'); loadImage(croppedData, 'cropped');
refreshCurrentPanel(); refreshCurrentPanel();
} }