图片压缩工具

花狐狸60

已于 2023-06-07 13:50:45 修改

阅读量48

点赞数

文章标签：图像处理

于 2023-06-07 12:01:17 首次发布

本文链接：https://blog.csdn.net/weixin_38637027/article/details/131084992

版权

<!DOCTYPE html>
<html>
<head>
	<title>图片压缩工具</title>
	<meta charset="UTF-8">
	<style>
		.container {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 50px;
		}

		.preview {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 20px;
		}

		.preview img {
			margin: 10px;
		}

		#progress {
			width: 100%;
			height: 20px;
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>图片压缩工具</h1>
		<input type="file" id="fileInput" multiple>
		<div>
			<label for="compressionRatioInput">压缩比例（10-100）：</label>
			<input type="number" id="compressionRatioInput" value="50" min="10" max="100">
		</div>
		<button id="compressBtn" onclick="compress()">压缩</button>
		<a id="downloadAll" href="#" download="images.zip"><button disabled>下载全部</button></a>
		<div class="preview" id="previewContainer"></div>
		<progress id="progress" value="0" max="100"></progress>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
	<script>
		function compress() {
			var fileInput = document.getElementById('fileInput');
			var previewContainer = document.getElementById('previewContainer');
			var compressionRatioInput = document.getElementById('compressionRatioInput');
			var compressBtn = document.getElementById('compressBtn');
			var downloadAll = document.getElementById('downloadAll');
			var progress = document.getElementById('progress');

			var selectedFiles = fileInput.files;
			if (selectedFiles.length === 0) {
				alert('请先选择要上传的图片！');
				return;
			}
			compressBtn.textContent = '正在压缩...';
			compressBtn.disabled = true;
			downloadAll.children[0].disabled = true;
			progress.value = 0;

			var images = [];
			for (var i = 0; i < selectedFiles.length; i++) {
				var image = new Image();
				image.src = window.URL.createObjectURL(selectedFiles[i]);
				images.push(image);
			}

			var total = selectedFiles.length;
			var completed = 0;
			var zip = new JSZip();
			for (var i = 0; i < images.length; i++) {
				var xhr = new XMLHttpRequest();
				xhr.open('GET', images[i].src, true);
				xhr.responseType = 'blob';
				xhr.onload = function(e) {
					if (this.status === 200) {
						var blob = this.response;
						var reader = new FileReader();
						reader.readAsDataURL(blob);
						reader.onload = function() {
							var img = new Image();
							img.src = this.result;
							img.onload = function() {
								var canvas = document.createElement('canvas');
								var context = canvas.getContext('2d');

								var width = this.width * (compressionRatioInput.value / 100);
								var height = this.height * (compressionRatioInput.value / 100);

								canvas.width = width;
								canvas.height = height;

								context.drawImage(this, 0, 0, width, height);

								var compressedDataUrl = canvas.toDataURL('image/jpeg', compressionRatioInput.value / 100);
								var filename = selectedFiles[completed].name.replace(/\.[^/.]+$/, "") + '_compressed.jpg'
								zip.file(filename, compressedDataUrl.substr(compressedDataUrl.indexOf(',') + 1), {base64: true});

								var previewImg = document.createElement('img');
								previewImg.src = compressedDataUrl;
								previewImg.style.maxHeight = '100px';
								previewContainer.appendChild(previewImg);

								completed++;
								progress.value = completed / total * 100;
								if (completed === total) {
									zip.generateAsync({type:'blob'})
										.then(function(content){
											downloadAll.href = URL.createObjectURL(content);
											compressBtn.textContent = '压缩完成';
											compressBtn.disabled = false;
											downloadAll.children[0].disabled = false;
											progress.value = 100;
											alert('全部图片上传完成！');
										});
								}
							};
						};
					}
				};
				xhr.upload.onprogress = function(e) {
					if (e.lengthComputable) {
						var percentComplete = e.loaded / e.total * 100;
						progress.value = completed / total * 100 + percentComplete / total;
					}
				};
				xhr.send();
			}
		}
	</script>
</body>
</html>

在代码中，我们使用了canvas.toDataURL()方法将图片压缩成JPEG格式，但是也可以将图片压缩成PNG格式或者WebP格式。只需要修改代码中的toDataURL()方法的第一个参数即可。例如，将图片压缩成PNG格式，只需要将代码中的toDataURL('image/jpeg', compressionRatioInput.value / 100)改为toDataURL('image/png', compressionRatioInput.value / 100)即可。同样地，将图片压缩成WebP格式，只需要将代码中的toDataURL('image/jpeg', compressionRatioInput.value / 100)改为toDataURL('image/webp', compressionRatioInput.value / 100)即可。需要注意的是，不同的图片格式对应的压缩质量参数可能不同，需要根据实际情况进行调整。

花狐狸60

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
图片压缩工具

<!DOCTYPE html><html><head> <title>图片压缩工具</title> <meta charset="UTF-8"> <style> .container { display: flex; flex-direction: column; align-items: center; margin-top: 50px; } .preview { di
复制链接

扫一扫