<!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)即可。需要注意的是,不同的图片格式对应的压缩质量参数可能不同,需要根据实际情况进行调整。
图片压缩工具
于 2023-06-07 12:01:17 首次发布