首先本地上传一张图片进行大小及格式验证获取图片base64编码设置压缩后的宽高并new 一个 Image，canvas绘制出改Image，并设置压缩后的宽高利用canvas对图片进行压缩获取到压缩后的base64编码，可以进行图片上传等操作
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>图片压缩</title></head><body><input type="file" id="upload" name=""><script>const ACCEPT = ['image/jpg', 'image/png', 'image/jpeg'];const MAXSIZE = 1024 * 1024;const MAXSIZE_STR = '1MB';function convertImageToBase64(file, callback) {let reader = new FileReader();reader.readAsDataURL(file);reader.addEventListener('load', function(e){// console.log(e.target.result);// console.log(reader.result);const base64Image = e.target.result;callback && callback(base64Image);reader = null;})reader.readAsDataURL(file);}// 图片压缩function compress(base64Image, callback){// console.log(base64Image);let maxW = 1024;let maxH = 1024;const image = new Image();image.addEventListener('load', function(e){let ratio; //图片的压缩比let needCompress = false; // 是否需要压缩if(maxW < image.naturalWidth) {needCompress = true;ratio = image.naturalWidth / maxW;maxH = image.naturalHeight / ratio;}//经过处理后，实际图片的尺寸为1024 * 640;if(maxH < image.naturalHeight) {needCompress = true;ratio = image.naturalHeight / maxH;maxW = image.naturalWidth / ratio;}if(!compress) {maxW = image.naturalWidth;maxH = image.naturalHeight;}//如果不需要压缩，需要获取图片的实际尺寸const canvas = document.createElement('canvas');canvas.setAttribute('id','__compress__');canvas.width = maxW;canvas.height = maxH;canvas.style.visibility = 'hidden';// document.body.appendChild(canvas);const ctx = canvas.getContext('2d');ctx.clearRect(0,0,maxW,maxH);ctx.drawImage(image, 0, 0, maxW, maxH);// toDataURL的第二个参数表示图片质量，取值为0-1 1为原图const compressImage = canvas.toDataURL('image/jpeg', 0.5);callback && callback(compressImage);// 在页面上展示压缩后的图片// const _image = new Image();// _image.src = compressImage;// document.body.append(_image);// canvas.remove();// console.log('压缩比:'+image.src.length / _image.src.length);});image.src = base64Image;// document.body.appendChild(image);}//获得压缩后的base64function uploadToServer(compressImage) {//这里调用上传图片base64编码的接口console.log('upload to server...', compressImage);}const upload = document.getElementById('upload');upload.addEventListener('change', function(e){console.log(e.target.files);const [file] = e.target.files;if(!file) {return;}const { type: fileType, size: fileSize } = file;//图片支持类型检查if(!ACCEPT.includes(fileType)) {alert(`不支持[${fileType}]文件类型!`);upload.value = '';return;}//图片容量检查if(fileSize > MAXSIZE) {alert(`文件大小超出${MAXSIZE_STR}!`);upload.value = '';return;}//压缩图片convertImageToBase64(file, (base64Image) => compress(base64Image, uploadToServer));})</script></body></html>
