873 lines
26 KiB
PHP
873 lines
26 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>图片压缩工具</title>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<style>
|
||
:root {
|
||
--primary-color: #3498db;
|
||
--secondary-color: #2ecc71;
|
||
--warning-color: #e74c3c;
|
||
--dark-color: #2c3e50;
|
||
--light-color: #ecf0f1;
|
||
--gray-color: #bdc3c7;
|
||
--accent-color: #9b59b6;
|
||
--transition: all 0.3s ease;
|
||
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||
--card-radius: 10px;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
background: linear-gradient(135deg, #1a2980, #26d0ce);
|
||
color: #333;
|
||
min-height: 100vh;
|
||
padding: 20px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: 20px;
|
||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
|
||
overflow: hidden;
|
||
}
|
||
|
||
header {
|
||
background: var(--dark-color);
|
||
color: white;
|
||
padding: 25px 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.logo {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
}
|
||
|
||
.logo i {
|
||
font-size: 2.2rem;
|
||
color: var(--secondary-color);
|
||
}
|
||
|
||
.logo h1 {
|
||
font-weight: 600;
|
||
font-size: 1.8rem;
|
||
}
|
||
|
||
.logo span {
|
||
color: var(--secondary-color);
|
||
}
|
||
|
||
main {
|
||
display: grid;
|
||
grid-template-columns: 300px 1fr;
|
||
min-height: 80vh;
|
||
}
|
||
|
||
.sidebar {
|
||
background: var(--dark-color);
|
||
color: var(--light-color);
|
||
padding: 25px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.file-browser {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: var(--card-radius);
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.directory-path {
|
||
font-size: 0.9rem;
|
||
color: var(--gray-color);
|
||
margin-bottom: 10px;
|
||
padding: 8px;
|
||
background: rgba(0, 0, 0, 0.2);
|
||
border-radius: 6px;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.file-list {
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: var(--card-radius);
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.file-item {
|
||
padding: 10px 15px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.file-item:hover {
|
||
background: rgba(44, 62, 80, 0.8);
|
||
}
|
||
|
||
.file-item.selected {
|
||
background: rgba(52, 152, 219, 0.7);
|
||
}
|
||
|
||
.file-item i {
|
||
color: var(--secondary-color);
|
||
}
|
||
|
||
.file-item span {
|
||
flex: 1;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.file-size {
|
||
color: var(--gray-color);
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.controls {
|
||
margin-top: 25px;
|
||
}
|
||
|
||
.control-group {
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
.control-group h3 {
|
||
margin-bottom: 12px;
|
||
color: var(--secondary-color);
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.quality-slider {
|
||
width: 100%;
|
||
height: 10px;
|
||
-webkit-appearance: none;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 10px;
|
||
outline: none;
|
||
}
|
||
|
||
.quality-slider::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
width: 22px;
|
||
height: 22px;
|
||
border-radius: 50%;
|
||
background: var(--primary-color);
|
||
cursor: pointer;
|
||
border: 2px solid white;
|
||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.quality-value {
|
||
text-align: center;
|
||
font-size: 1.1rem;
|
||
font-weight: bold;
|
||
margin-top: 5px;
|
||
color: white;
|
||
}
|
||
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
padding: 12px 25px;
|
||
background: var(--primary-color);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 50px;
|
||
cursor: pointer;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
transition: var(--transition);
|
||
width: 100%;
|
||
margin-top: 10px;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.btn i {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.btn-compress {
|
||
background: var(--secondary-color);
|
||
}
|
||
|
||
.btn-compress-all {
|
||
background: var(--accent-color);
|
||
}
|
||
|
||
.content {
|
||
padding: 30px;
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
|
||
gap: 30px;
|
||
}
|
||
|
||
.preview-card {
|
||
background: white;
|
||
border-radius: var(--card-radius);
|
||
box-shadow: var(--shadow);
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.card-header {
|
||
background: var(--dark-color);
|
||
color: white;
|
||
padding: 15px 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.card-header h2 {
|
||
font-size: 1.2rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.card-body {
|
||
padding: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex: 1;
|
||
min-height: 300px;
|
||
}
|
||
|
||
.preview-container {
|
||
width: 100%;
|
||
height: 250px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid var(--gray-color);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
margin-bottom: 20px;
|
||
position: relative;
|
||
}
|
||
|
||
.preview-image {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.file-info {
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
background: rgba(189, 195, 199, 0.2);
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.info-label {
|
||
color: #7f8c8d;
|
||
font-size: 0.85rem;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.info-value {
|
||
font-weight: 600;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.before .info-value {
|
||
color: var(--dark-color);
|
||
}
|
||
|
||
.after .info-value {
|
||
color: var(--secondary-color);
|
||
}
|
||
|
||
.comparison {
|
||
display: flex;
|
||
width: 100%;
|
||
gap: 10px;
|
||
}
|
||
|
||
.savings {
|
||
font-weight: bold;
|
||
color: var(--secondary-color);
|
||
text-align: center;
|
||
padding: 15px;
|
||
font-size: 1.1rem;
|
||
background: rgba(46, 204, 113, 0.1);
|
||
border-radius: var(--card-radius);
|
||
width: 100%;
|
||
}
|
||
|
||
.no-image {
|
||
color: #7f8c8d;
|
||
font-size: 1.1rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.no-image i {
|
||
font-size: 3rem;
|
||
margin-bottom: 15px;
|
||
display: block;
|
||
color: var(--gray-color);
|
||
}
|
||
|
||
.progress-container {
|
||
margin-top: 20px;
|
||
width: 100%;
|
||
}
|
||
|
||
.progress-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.progress-bar {
|
||
height: 12px;
|
||
background: #e0e0e0;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
background: var(--secondary-color);
|
||
width: 0%;
|
||
transition: width 0.5s ease;
|
||
}
|
||
|
||
.spinner {
|
||
width: 50px;
|
||
height: 50px;
|
||
border: 5px solid rgba(52, 152, 219, 0.2);
|
||
border-top-color: var(--primary-color);
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.completed {
|
||
display: none;
|
||
color: var(--secondary-color);
|
||
font-size: 1.3rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.completed i {
|
||
font-size: 2rem;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1000;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.overlay.active {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
.overlay-content {
|
||
background: white;
|
||
border-radius: 15px;
|
||
width: 90%;
|
||
max-width: 600px;
|
||
padding: 30px;
|
||
text-align: center;
|
||
transform: translateY(-30px);
|
||
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||
}
|
||
|
||
.overlay.active .overlay-content {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.overlay-title {
|
||
font-size: 1.8rem;
|
||
margin-bottom: 20px;
|
||
color: var(--dark-color);
|
||
}
|
||
|
||
.overlay-text {
|
||
font-size: 1.1rem;
|
||
margin-bottom: 30px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.confirm-buttons {
|
||
display: flex;
|
||
gap: 15px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.overlay-btn {
|
||
min-width: 120px;
|
||
padding: 12px 20px;
|
||
border-radius: 50px;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
border: 2px solid transparent;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.btn-confirm {
|
||
background: var(--secondary-color);
|
||
color: white;
|
||
}
|
||
|
||
.btn-confirm:hover {
|
||
background: #27ae60;
|
||
}
|
||
|
||
.btn-cancel {
|
||
background: transparent;
|
||
color: var(--dark-color);
|
||
border-color: var(--gray-color);
|
||
}
|
||
|
||
.btn-cancel:hover {
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
main {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.sidebar {
|
||
padding: 20px 15px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.content {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
header {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
gap: 15px;
|
||
}
|
||
|
||
.logo {
|
||
justify-content: center;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<div class="logo">
|
||
<i class="fas fa-compress-alt"></i>
|
||
<h1>图片<span>压缩</span>工具</h1>
|
||
</div>
|
||
<div>
|
||
<p>批量压缩并替换图片文件</p>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<aside class="sidebar">
|
||
<div class="file-browser">
|
||
<h3>选择目录</h3>
|
||
<div class="directory-path">
|
||
storage/app/public/images/compressed
|
||
</div>
|
||
|
||
<div class="file-list">
|
||
<!-- File items will be added dynamically -->
|
||
</div>
|
||
|
||
<button class="btn" id="refreshBtn">
|
||
<i class="fas fa-sync-alt"></i> 刷新文件列表
|
||
</button>
|
||
</div>
|
||
|
||
<div class="controls">
|
||
<div class="control-group">
|
||
<h3>压缩质量设置</h3>
|
||
<input type="range" min="40" max="95" value="75" class="quality-slider" id="qualitySlider">
|
||
<div class="quality-value" id="qualityValue">75%</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<h3>操作</h3>
|
||
<button class="btn btn-compress" id="compressBtn">
|
||
<i class="fas fa-file-image"></i> 压缩当前图片
|
||
</button>
|
||
<button class="btn btn-compress-all" id="compressAllBtn">
|
||
<i class="fas fa-layer-group"></i> 批量压缩目录
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<div class="content">
|
||
<div class="preview-card">
|
||
<div class="card-header">
|
||
<h2>原始图片</h2>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="preview-container" id="originalPreview">
|
||
<div class="no-image">
|
||
<i class="fas fa-image"></i>
|
||
<p>请从左侧选择一张图片</p>
|
||
</div>
|
||
</div>
|
||
<div class="file-info before">
|
||
<div class="info-item">
|
||
<div class="info-label">文件大小</div>
|
||
<div class="info-value" id="originalSize">0 KB</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">分辨率</div>
|
||
<div class="info-value" id="originalDims">0×0</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="preview-card">
|
||
<div class="card-header">
|
||
<h2>压缩后图片</h2>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="preview-container" id="compressedPreview">
|
||
<div class="no-image">
|
||
<i class="fas fa-compress-arrows-alt"></i>
|
||
<p>压缩后图片将显示在这里</p>
|
||
</div>
|
||
</div>
|
||
<div class="file-info after">
|
||
<div class="info-item">
|
||
<div class="info-label">文件大小</div>
|
||
<div class="info-value" id="compressedSize">0 KB</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">分辨率</div>
|
||
<div class="info-value" id="compressedDims">0×0</div>
|
||
</div>
|
||
</div>
|
||
<div class="savings" id="savingsText">
|
||
尺寸减少：0%
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Progress card for batch processing -->
|
||
<div class="preview-card">
|
||
<div class="card-header">
|
||
<h2>批量压缩进度</h2>
|
||
</div>
|
||
<div class="card-body" style="align-items: center;">
|
||
<div class="no-image" id="batchPlaceholder">
|
||
<i class="fas fa-layer-group"></i>
|
||
<p>批量压缩状态将显示在这里</p>
|
||
</div>
|
||
|
||
<div class="progress-container" id="progressContainer" style="display: none;">
|
||
<div class="progress-header">
|
||
<span>处理中...</span>
|
||
<span id="progressText">0/0</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" id="progressFill"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="completed" id="completedMsg">
|
||
<i class="fas fa-check-circle"></i>
|
||
<p>压缩完成！所有文件已更新</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- Confirmation overlay -->
|
||
<div class="overlay" id="confirmOverlay">
|
||
<div class="overlay-content">
|
||
<h2 class="overlay-title">确认批量操作</h2>
|
||
<p class="overlay-text">
|
||
您将压缩 <strong id="fileCount">0</strong> 个文件，覆盖其原始文件。<br>
|
||
此操作不可逆，请确保您已备份重要文件。
|
||
</p>
|
||
<div class="confirm-buttons">
|
||
<button class="overlay-btn btn-confirm" id="confirmBatch">开始压缩</button>
|
||
<button class="overlay-btn btn-cancel" id="cancelBatch">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Mock data for demonstration (in a real app this would come from server)
|
||
const directoryData = [
|
||
{ name: 'engagement1.jpg', size: '2.8MB', path: 'engagement1.jpg', type: 'image/jpeg' },
|
||
{ name: 'wedding_prep.png', size: '4.2MB', path: 'wedding_prep.png', type: 'image/png' },
|
||
{ name: 'ceremony_moment.jpg', size: '3.1MB', path: 'ceremony_moment.jpg', type: 'image/jpeg' },
|
||
{ name: 'family_group.jpg', size: '5.4MB', path: 'family_group.jpg', type: 'image/jpeg' },
|
||
{ name: 'reception_dance.jpg', size: '3.7MB', path: 'reception_dance.jpg', type: 'image/jpeg' },
|
||
{ name: 'bridal_portrait.jpg', size: '4.8MB', path: 'bridal_portrait.jpg', type: 'image/jpeg' },
|
||
{ name: 'groom_portrait.png', size: '3.9MB', path: 'groom_portrait.png', type: 'image/png' },
|
||
{ name: 'venue_overview.jpg', size: '6.2MB', path: 'venue_overview.jpg', type: 'image/jpeg' },
|
||
];
|
||
|
||
// DOM Elements
|
||
const fileList = document.querySelector('.file-list');
|
||
const qualitySlider = document.getElementById('qualitySlider');
|
||
const qualityValue = document.getElementById('qualityValue');
|
||
const refreshBtn = document.getElementById('refreshBtn');
|
||
const compressBtn = document.getElementById('compressBtn');
|
||
const compressAllBtn = document.getElementById('compressAllBtn');
|
||
const originalPreview = document.getElementById('originalPreview');
|
||
const compressedPreview = document.getElementById('compressedPreview');
|
||
const originalSize = document.getElementById('originalSize');
|
||
const compressedSize = document.getElementById('compressedSize');
|
||
const originalDims = document.getElementById('originalDims');
|
||
const compressedDims = document.getElementById('compressedDims');
|
||
const savingsText = document.getElementById('savingsText');
|
||
const batchPlaceholder = document.getElementById('batchPlaceholder');
|
||
const progressContainer = document.getElementById('progressContainer');
|
||
const progressFill = document.getElementById('progressFill');
|
||
const progressText = document.getElementById('progressText');
|
||
const completedMsg = document.getElementById('completedMsg');
|
||
const confirmOverlay = document.getElementById('confirmOverlay');
|
||
const fileCount = document.getElementById('fileCount');
|
||
const confirmBatch = document.getElementById('confirmBatch');
|
||
const cancelBatch = document.getElementById('cancelBatch');
|
||
|
||
// Current state
|
||
let currentFile = null;
|
||
let compressedImage = null;
|
||
let currentQuality = 75;
|
||
|
||
// Initialize file browser
|
||
function initFileBrowser() {
|
||
fileList.innerHTML = '';
|
||
|
||
directoryData.forEach(file => {
|
||
const fileItem = document.createElement('div');
|
||
fileItem.className = 'file-item';
|
||
fileItem.dataset.path = file.path;
|
||
fileItem.dataset.size = file.size;
|
||
fileItem.dataset.type = file.type;
|
||
|
||
fileItem.innerHTML = `
|
||
<i class="fas fa-file-image"></i>
|
||
<span>${file.name}</span>
|
||
<span class="file-size">${file.size}</span>
|
||
`;
|
||
|
||
fileItem.addEventListener('click', () => selectFile(fileItem, file));
|
||
fileList.appendChild(fileItem);
|
||
});
|
||
}
|
||
|
||
// Select file handler
|
||
function selectFile(item, file) {
|
||
// Clear previous selection
|
||
document.querySelectorAll('.file-item').forEach(el => {
|
||
el.classList.remove('selected');
|
||
});
|
||
|
||
// Select current
|
||
item.classList.add('selected');
|
||
currentFile = file;
|
||
|
||
// Preview the image
|
||
previewImage(file);
|
||
}
|
||
|
||
// Preview image function
|
||
function previewImage(file) {
|
||
// For demonstration, we'll use placeholder images
|
||
const placeholderImage = 'https://picsum.photos/600/400';
|
||
|
||
// Clear previous previews
|
||
originalPreview.innerHTML = '';
|
||
compressedPreview.innerHTML = '<div class="no-image"><i class="fas fa-compress-arrows-alt"></i><p>压缩后图片将显示在这里</p></div>';
|
||
|
||
// Create image element
|
||
const img = document.createElement('img');
|
||
img.className = 'preview-image';
|
||
img.src = placeholderImage;
|
||
|
||
originalPreview.appendChild(img);
|
||
|
||
// Simulate file info
|
||
const sizeParts = file.size.match(/(\d+\.?\d*)(\w+)/);
|
||
if (sizeParts) {
|
||
const sizeNum = parseFloat(sizeParts[1]);
|
||
originalSize.textContent = file.size;
|
||
originalDims.textContent = '1920×1080'; // Fixed for demo
|
||
|
||
// Simulate compression for demo
|
||
setTimeout(() => {
|
||
simulateCompression(sizeNum, sizeParts[2]);
|
||
}, 1000);
|
||
}
|
||
}
|
||
|
||
// Simulate compression (in a real app, real compression would happen)
|
||
function simulateCompression(size, unit) {
|
||
// Calculate compression for demo
|
||
const compressionRatio = 1 - (currentQuality / 100);
|
||
const compressedSize = (size * compressionRatio * 0.9).toFixed(1);
|
||
const savings = Math.round((1 - (compressedSize / size)) * 100);
|
||
|
||
// Update compressed panel
|
||
compressedSize.textContent = compressedSize + unit;
|
||
compressedDims.textContent = '1920×1080';
|
||
savingsText.innerHTML = `尺寸减少：<strong>${savings}%</strong>`;
|
||
|
||
// Show compressed image (same for demo)
|
||
compressedPreview.innerHTML = '';
|
||
const img = document.createElement('img');
|
||
img.className = 'preview-image';
|
||
img.src = 'https://picsum.photos/600/400';
|
||
compressedPreview.appendChild(img);
|
||
}
|
||
|
||
// Compress current image
|
||
function compressImage() {
|
||
if (!currentFile) {
|
||
alert('请先选择一张图片');
|
||
return;
|
||
}
|
||
|
||
// In a real implementation, this would send the image to the server for processing
|
||
// Here we just simulate the compression
|
||
const sizeParts = currentFile.size.match(/(\d+\.?\d*)(\w+)/);
|
||
if (sizeParts) {
|
||
const sizeNum = parseFloat(sizeParts[1]);
|
||
simulateCompression(sizeNum, sizeParts[2]);
|
||
|
||
// Show success message
|
||
savingsText.innerHTML = `压缩成功！保存为原始文件`;
|
||
savingsText.style.backgroundColor = 'rgba(46, 204, 113, 0.15)';
|
||
|
||
setTimeout(() => {
|
||
savingsText.style.backgroundColor = 'rgba(46, 204, 113, 0.1)';
|
||
}, 3000);
|
||
}
|
||
}
|
||
|
||
// Show batch compression confirmation
|
||
function showBatchConfirm() {
|
||
fileCount.textContent = directoryData.length;
|
||
confirmOverlay.classList.add('active');
|
||
}
|
||
|
||
// Execute batch compression
|
||
function executeBatchCompression() {
|
||
confirmOverlay.classList.remove('active');
|
||
|
||
// Hide placeholder and show progress
|
||
batchPlaceholder.style.display = 'none';
|
||
progressContainer.style.display = 'block';
|
||
completedMsg.style.display = 'none';
|
||
|
||
const totalFiles = directoryData.length;
|
||
let processed = 0;
|
||
|
||
const interval = setInterval(() => {
|
||
processed++;
|
||
const progress = (processed / totalFiles) * 100;
|
||
|
||
progressFill.style.width = `${progress}%`;
|
||
progressText.textContent = `${processed}/${totalFiles}`;
|
||
|
||
if (processed >= totalFiles) {
|
||
clearInterval(interval);
|
||
|
||
// Show completion message
|
||
setTimeout(() => {
|
||
progressContainer.style.display = 'none';
|
||
completedMsg.style.display = 'block';
|
||
}, 1000);
|
||
}
|
||
}, 800);
|
||
}
|
||
|
||
// Event listeners
|
||
qualitySlider.addEventListener('input', () => {
|
||
currentQuality = parseInt(qualitySlider.value);
|
||
qualityValue.textContent = currentQuality + '%';
|
||
|
||
if (currentFile) {
|
||
const sizeParts = currentFile.size.match(/(\d+\.?\d*)(\w+)/);
|
||
if (sizeParts) {
|
||
const sizeNum = parseFloat(sizeParts[1]);
|
||
simulateCompression(sizeNum, sizeParts[2]);
|
||
}
|
||
}
|
||
});
|
||
|
||
refreshBtn.addEventListener('click', initFileBrowser);
|
||
compressBtn.addEventListener('click', compressImage);
|
||
compressAllBtn.addEventListener('click', showBatchConfirm);
|
||
confirmBatch.addEventListener('click', executeBatchCompression);
|
||
cancelBatch.addEventListener('click', () => {
|
||
confirmOverlay.classList.remove('active');
|
||
});
|
||
|
||
// Initialize the app
|
||
initFileBrowser();
|
||
</script>
|
||
</body>
|
||
</html>
|