帮我写一个直接可用的图片在线压缩网页源码
以下是一个简单的图片在线压缩网页源码：
<!DOCTYPE html>
<html>
<head>
<title>图片在线压缩</title>
<script src="https://cdn.jsdelivr.net/npm/image-compressor/dist/image-compressor.min.js"></script>
</head>
<body>
<h1>图片在线压缩</h1>
<input type="file" id="imageFile" accept="image/*">
<button onclick="compressImage()">压缩图片</button>
<br>
<img id="compressedImage" src="" style="display: none;">
<script>
function compressImage() {
const imageFile = document.getElementById('imageFile').files[0];
const image = document.getElementById('compressedImage');
const compressor = new ImageCompressor();
compressor.compress(imageFile, {
maxWidth: 800,
maxHeight: 800,
quality: 0.6,
success(result) {
const reader = new FileReader();
reader.onload = function(event) {
image.src = event.target.result;
image.style.display = 'block';
};
reader.readAsDataURL(result);
},
error(e) {
console.log(e.message);
}
});
}
</script>
</body>
</html>
这个网页源码使用了 image-compressor 库来压缩图片。用户可以选择一个图片文件，并点击"压缩图片"按钮，然后压缩后的图片将显示在页面上。压缩参数可以根据需要进行调整，例如最大宽度、最大高度和质量等。请确保将 https://cdn.jsdelivr.net/npm/image-compressor/dist/image-compressor.min.js 这个链接添加到页面中，以便加载 image-compressor 库
原文地址: https://www.cveoy.top/t/topic/itXK 著作权归作者所有。请勿转载和采集!