图片压缩工具

<!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)即可。需要注意的是,不同的图片格式对应的压缩质量参数可能不同,需要根据实际情况进行调整。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值