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) / 1000if (fileSize < setsize) {return file}return new Promise((resolve, reject) => {new Compressor(file, {quality, //压缩质量, 0-1convertTypes: [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) / 1000if (newfileSize > 2) {const nextQuality = quality * 0.5if (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>
)
)
)
