1.compressImage函数：通过canvas将选择文件压缩后展示在页面上
2.compressImageToSetsize函数：传入参数file, quality = 0.6,setsize = 1，借助compressorjs将传入文件压缩到不超过指定大小（M）
3.compressImageN：函数测试图片文件压缩前后的对比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>图片压缩</title>
</head>
<style>
* {
margin: 0;
}
.box {
padding: 100px;
width: 100%;
margin: 0 auto;
}
div {
margin-top: 20px;
width: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="box-file">
<input type="file" id="imageFileInput" accept="image/*">
<button onclick="compressImage()">压缩图片</button>
<button onclick="compressImageN()">多次压缩图片</button>
<canvas id="canvas" style="display: none;"></canvas>
<img id="outputImage" style="max-width: 300px;">
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/compressorjs/1.2.1/compressor.min.js"></script>
<script>
// 通过canvas将选择文件压缩后展示在页面上
function compressImage() {
const input = document.getElementById('imageFileInput');
const file = input.files[0];
console.log('压缩前',file);
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = document.getElementById('outputImage');
// 创建一个新的Image对象，用于加载图片文件
const imgElement = new Image();
imgElement.onload = function() {
// 设置canvas的大小与图片一样大
canvas.width = imgElement.width;
canvas.height = imgElement.height;
// 将图片绘制到canvas上
ctx.drawImage(imgElement, 0, 0, imgElement.width, imgElement.height);
// 获取压缩后的图片数据URL（base64格式）
const compressedDataUrl = canvas.toDataURL('image/jpeg', 0.8); // 第二个参数是压缩质量，范围是0-1，1为最高质量
// 将压缩后的图片展示在页面上
img.src = compressedDataUrl;
};
imgElement.src = URL.createObjectURL(file); // 使用URL对象将文件转换为URL，以便加载到Image对象中
}
// 借助compressorjs将传入文件压缩到不超过指定大小（M）
function compressImageToSetsize(file, quality = 0.6,setsize = 1) {
const fileSize = Math.ceil((parseInt(String(file.size), 10) / (1024 * 1024)) * 1000) / 1000
if (fileSize < setsize) {
return file
}
return new Promise((resolve, reject) => {
new Compressor(file, {
quality, //压缩质量, 0-1
convertTypes: [file.type], //转换的类型
async success(result) {
let newfile = new File([result], file.name, { type: file.type })
const newfileSize = Math.ceil((parseInt(String(newfile.size), 10) / (1024 * 1024)) * 1000) / 1000
if (newfileSize > 2) {
const nextQuality = quality * 0.5
if (nextQuality < 0.001) {
console.warn('compress fail-->>quality < 0.0001, please check img')
resolve(null)
return
}
newfile = await Service.compressImageToSetsize(newfile, quality * 0.5)
}
resolve(newfile)
},
error(err) {
console.warn('compress fail-->>', err)
reject()
},
})
})
}
async function compressImageN(){
const input = document.getElementById('imageFileInput');
const file = input.files[0];
console.log('压缩前',file);
let newFile = await compressImageToSetsize(file)
console.log('压缩后',newFile);
}
</script>
</body>
</html>
