Compare commits

..

3 Commits

Author SHA1 Message Date
2ce1c9056a fix json tool show 2025-12-10 11:10:44 +08:00
b8fc9376d5 add image compressor 2025-12-09 16:58:32 +08:00
aa1ab6ef13 update image to pdf 2025-12-09 15:14:11 +08:00
4 changed files with 1236 additions and 21 deletions

1200
image_compressor.html Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -582,7 +582,7 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>图片转PDF</h1> <h1>图片转PDF(纯前端,后台不保存数据)</h1>
<div class="main-content"> <div class="main-content">
<!-- 左侧面板 --> <!-- 左侧面板 -->

View File

@@ -502,6 +502,15 @@
<div class="tooltip">图片转PDF</div> <div class="tooltip">图片转PDF</div>
</div> </div>
<div class="tool-item" data-tool="image-compressor">
<div class="tool-icon">🗜️</div>
<div class="tool-info">
<h3>图片压缩</h3>
<p>在线压缩图片文件大小,支持质量调节和格式转换</p>
</div>
<div class="tooltip">图片压缩</div>
</div>
<div class="tool-item" data-tool="other"> <div class="tool-item" data-tool="other">
<div class="tool-icon">⚙️</div> <div class="tool-icon">⚙️</div>
<div class="tool-info"> <div class="tool-info">
@@ -618,6 +627,11 @@
url: "image_to_pdf.html", url: "image_to_pdf.html",
hash: "#image2pdf", hash: "#image2pdf",
}, },
"image-compressor": {
title: "图片压缩",
url: "image_compressor.html",
hash: "#image-compressor",
},
other: { other: {
title: "其他功能", title: "其他功能",
url: "other_function.html", url: "other_function.html",

View File

@@ -137,6 +137,7 @@
.editor-content { .editor-content {
flex: 1; flex: 1;
position: relative; position: relative;
overflow: hidden;
} }
textarea { textarea {
@@ -154,15 +155,21 @@
} }
.output-area { .output-area {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white; background: white;
padding: 15px; padding: 15px;
font-family: "Consolas", "Monaco", "Courier New", monospace; font-family: "Consolas", "Monaco", "Courier New", monospace;
font-size: 13px; font-size: 13px;
line-height: 1.4; line-height: 1.4;
white-space: pre-wrap; white-space: pre;
overflow: auto; overflow: auto;
height: 100%;
color: #333; color: #333;
word-wrap: break-word;
overflow-wrap: break-word;
} }
.error-message { .error-message {
@@ -411,13 +418,10 @@
// 语法高亮 // 语法高亮
output.innerHTML = highlightJSON(formatted); output.innerHTML = highlightJSON(formatted);
// 显示成功消息 // 在状态栏显示成功消息
successMessage.textContent = "✅ JSON 格式化成功!"; document.getElementById("status").textContent = "✅ JSON 格式化成功!";
successMessage.style.display = "block";
// 3秒后隐藏成功消息
setTimeout(() => { setTimeout(() => {
successMessage.style.display = "none"; document.getElementById("status").textContent = "就绪";
}, 3000); }, 3000);
} catch (error) { } catch (error) {
// 显示错误 // 显示错误
@@ -446,12 +450,11 @@
const minified = JSON.stringify(jsonObj); const minified = JSON.stringify(jsonObj);
output.textContent = minified; output.textContent = minified;
successMessage.textContent = "✅ JSON 压缩成功!"; // 在状态栏显示成功消息
successMessage.style.display = "block"; document.getElementById("status").textContent = "✅ JSON 压缩成功!";
errorMessage.style.display = "none"; errorMessage.style.display = "none";
setTimeout(() => { setTimeout(() => {
successMessage.style.display = "none"; document.getElementById("status").textContent = "就绪";
}, 3000); }, 3000);
} catch (error) { } catch (error) {
errorMessage.innerHTML = `❌ JSON 格式错误: ${error.message}`; errorMessage.innerHTML = `❌ JSON 格式错误: ${error.message}`;
@@ -533,11 +536,10 @@
navigator.clipboard navigator.clipboard
.writeText(textToCopy) .writeText(textToCopy)
.then(() => { .then(() => {
successMessage.textContent = "📋 已复制到剪贴板!"; // 在状态栏显示成功消息
successMessage.style.display = "block"; document.getElementById("status").textContent = "📋 已复制到剪贴板!";
setTimeout(() => { setTimeout(() => {
successMessage.style.display = "none"; document.getElementById("status").textContent = "就绪";
}, 2000); }, 2000);
}) })
.catch(() => { .catch(() => {
@@ -549,11 +551,10 @@
document.execCommand("copy"); document.execCommand("copy");
document.body.removeChild(textArea); document.body.removeChild(textArea);
successMessage.textContent = "📋 已复制到剪贴板!"; // 在状态栏显示成功消息
successMessage.style.display = "block"; document.getElementById("status").textContent = "📋 已复制到剪贴板!";
setTimeout(() => { setTimeout(() => {
successMessage.style.display = "none"; document.getElementById("status").textContent = "就绪";
}, 2000); }, 2000);
}); });
} }