自己动手做在线图片压缩工具

最新推荐文章于 2025-07-14 10:03:21 发布

Asurplus

最新推荐文章于 2025-07-14 10:03:21 发布

阅读量7.1k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： # Html 文章标签： html css JavaScript 图片压缩

本文链接：https://blog.csdn.net/qq_40065776/article/details/145322762

Html 专栏收录该内容

9 篇文章

订阅专栏

图片压缩在节省存储空间、加快加载速度、降低带宽消耗、提升处理效率、便于分享和传输、保护隐私和安全以及适应不同设备等方面都发挥着重要作用。

1、效果预览

在这里插入图片描述

2、HTML

创建 index.html 文件

<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>图片压缩工具</title>
		<link rel="stylesheet" href="css/index.css">
	</head>

	<body>
		<!-- 主容器 -->
		<div class="container">
			<!-- 标题区域 -->
			<header>
				<h1>图片压缩工具</h1>
				<p>简单、高效的图片压缩服务</p>
			</header>
			<!-- 上传区域 -->
			<div class="upload-area">
				<input type="file" id="fileInput" accept="image/png, image/jpeg" hidden>
				<div class="upload-box" id="uploadArea">
					<img src="img/svg/upload.svg" alt="上传图标" class="upload-icon">
					<p>点击或拖拽图片到这里</p>
					<p class="support-text">支持 PNG、JPG 格式</p>
				</div>
			</div>
			<!-- 预览和压缩区域 -->
			<div class="preview-container" id="previewContainer" style="display: none;">
				<div class="image-comparison">
					<!-- 原图预览 -->
					<div class="preview-box">
						<h3>原图</h3>
						<div class="image-wrapper">
							<img id="originalImage" alt="原图预览"> </div>
						<div class="image-info">
							<span>文件大小：</span>
							<span id="originalSize">0 KB</span>
						</div>
					</div>
					<!-- 压缩图预览 -->
					<div class="preview-box">
						<h3>压缩后</h3>
						<div class="image-wrapper">
							<img id="compressedImage" alt="压缩后预览"> </div>
						<div class="image-info">
							<span>文件大小：</span>
							<span id="compressedSize">0 KB</span>
						</div>
					</div>
				</div>
				<!-- 压缩控制区域 -->
				<div class="compression-controls">
					<div class="quality-control">
						<label for="qualitySlider">压缩质量：
							<span id="qualityValue">50%</span>
							
						</label>
						<input type="range" id="qualitySlider" min="0" max="100" value="50">
					</div>
					<button id="downloadBtn" class="download-btn">下载压缩后的图片</button>
				</div>
			</div>
		</div>
		<script src="js/index.js"></script>
	</body>

</html>

3、CSS

创建 index.css 文件

/* 全局样式重置 */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


/* 基础样式 */

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background-color: #f5f5f7;
	color: #1d1d1f;
	line-height: 1.5;
}


/* 容器样式 */

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem;
}


/* 标题区域 */

header {
	text-align: center;
	margin-bottom: 3rem;
}

header h1 {
	font-size: 2.5rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

header p {
	color: #86868b;
	font-size: 1.1rem;
}


/* 上传区域样式 */

.upload-area {
	background-color: white;
	border-radius: 1rem;
	padding: 2rem;
	text-align: center;
	margin-bottom: 2rem;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
}

.upload-box {
	border: 2px dashed #d2d2d7;
	border-radius: 0.8rem;
	padding: 2rem;
	cursor: pointer;
	transition: all 0.3s ease;
}

.upload-box:hover {
	border-color: #0071e3;
	background-color: #f5f5f7;
}

.upload-icon {
	width: 64px;
	height: 64px;
	margin-bottom: 1rem;
}

.support-text {
	color: #86868b;
	font-size: 0.9rem;
	margin-top: 0.5rem;
}


/* 预览区域样式 */

.preview-container {
	background-color: white;
	border-radius: 1rem;
	padding: 2rem;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.image-comparison {
	display: flex;
	gap: 2rem;
	margin-bottom: 2rem;
}

.preview-box {
	flex: 1;
}

.preview-box h3 {
	margin-bottom: 1rem;
	font-weight: 500;
}

.image-wrapper {
	border-radius: 0.8rem;
	overflow: hidden;
	background-color: #f5f5f7;
}

.image-wrapper img {
	width: 100%;
	height: auto;
	display: block;
}

.image-info {
	margin-top: 1rem;
	color: #86868b;
}


/* 压缩控制区域 */

.compression-controls {
	padding-top: 1.5rem;
	border-top: 1px solid #d2d2d7;
}

.quality-control {
	margin-bottom: 1.5rem;
}

.quality-control label {
	display: block;
	margin-bottom: 0.5rem;
}

input[type="range"] {
	width: 100%;
	height: 4px;
	background: #d2d2d7;
	border-radius: 2px;
	-webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	background: #0071e3;
	border-radius: 50%;
	cursor: pointer;
}

.download-btn {
	background-color: #0071e3;
	color: white;
	border: none;
	border-radius: 0.8rem;
	padding: 0.8rem 2rem;
	font-size: 1rem;
	cursor: pointer;
	transition: all 0.3s ease;
}

.download-btn:hover {
	background-color: #0077ed;
}


/* 响应式设计 */

@media (max-width: 768px) {
	.image-comparison {
		flex-direction: column;
	}
	.container {
		padding: 1rem;
	}
}

4、JavaScript

创建 index.js 文件

// 获取DOM元素
const uploadArea = document.getElementById('uploadArea');
const fileInput = document.getElementById('fileInput');
const previewContainer = document.getElementById('previewContainer');
const originalImage = document.getElementById('originalImage');
const compressedImage = document.getElementById('compressedImage');
const originalSize = document.getElementById('originalSize');
const compressedSize = document.getElementById('compressedSize');
const qualitySlider = document.getElementById('qualitySlider');
const qualityValue = document.getElementById('qualityValue');
const downloadBtn = document.getElementById('downloadBtn');
// 上传区域点击事件
uploadArea.addEventListener('click', () => {
	fileInput.click();
});
// 处理文件拖放
uploadArea.addEventListener('dragover', (e) => {
	e.preventDefault();
	uploadArea.style.borderColor = '#0071e3';
});
uploadArea.addEventListener('dragleave', (e) => {
	e.preventDefault();
	uploadArea.style.borderColor = '#d2d2d7';
});
uploadArea.addEventListener('drop', (e) => {
	e.preventDefault();
	uploadArea.style.borderColor = '#d2d2d7';
	const file = e.dataTransfer.files[0];
	if(file && file.type.match('image.*')) {
		processImage(file);
	}
});
// 文件选择处理
fileInput.addEventListener('change', (e) => {
	const file = e.target.files[0];
	if(file) {
		processImage(file);
	}
});
// 处理图片
function processImage(file) {
	// 显示原始文件大小    
	originalSize.textContent = formatFileSize(file.size);
	// 创建文件预览  
	const reader = new FileReader();
	reader.onload = (e) => {
		originalImage.src = e.target.result;
		compressImage(e.target.result);
		previewContainer.style.display = 'block';
	};
	reader.readAsDataURL(file);
}
// 压缩图片
function compressImage(dataUrl) {
	const img = new Image();
	img.onload = () => {
		const canvas = document.createElement('canvas');
		const ctx = canvas.getContext('2d');
		canvas.width = img.width;
		canvas.height = img.height;
		ctx.drawImage(img, 0, 0);
		const quality = qualitySlider.value / 100;
		const compressedDataUrl = canvas.toDataURL('image/jpeg', quality);
		compressedImage.src = compressedDataUrl;
		// 计算压缩后的大小      
		const compressedSize = Math.round((compressedDataUrl.length * 3) / 4);
		document.getElementById('compressedSize').textContent = formatFileSize(compressedSize);
	};
	img.src = dataUrl;
}
// 质量滑块变化事件
qualitySlider.addEventListener('input', (e) => {
	qualityValue.textContent = e.target.value + '%';
	if(originalImage.src) {
		compressImage(originalImage.src);
	}
});
// 下载按钮点击事件
downloadBtn.addEventListener('click', () => {
	const link = document.createElement('a');
	link.download = 'compressed-image.jpg';
	link.href = compressedImage.src;
	link.click();
});
// 文件大小格式化
function formatFileSize(bytes) {
	if(bytes === 0) return '0 Bytes';
	const k = 1024;
	const sizes = ['Bytes', 'KB', 'MB', 'GB'];
	const i = Math.floor(Math.log(bytes) / Math.log(k));
	return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}