引言

本来我的网站的图片直接上传到服务器后，再进行压缩的

但我发现，在php默认配置的情况下，文件最大上传的大小只有2M

可现在手机，随随便便拍出来，都是超高清了呀，起码都有个3M,5M的，这一上传就显示上传失败

原因就是太大了，直接被服务器拒绝了，连上传程序都没走到。

所以，我结合了之前的那个想法，打算在网站前端进行图片压缩，这样既不会影响网站后端处理速度，又能够上传任意大小的文件。

实现

这里用了个js的函数，作为图片压缩的核心代码

let maxSize = 120*1024;
async function compressImage(file) {
    return new Promise((resolve) => {
        const img = new Image();
        img.src = URL.createObjectURL(file);
        img.onload = () => {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            let width = img.width;
            let height = img.height;
            let quality = 0.9;
            function compress() {
                canvas.width = width;
                canvas.height = height;
                ctx.drawImage(img, 0, 0, width, height);
                canvas.toBlob((blob) => {
                    if (blob.size <= maxSize) {
                        // 将 Blob 对象转换为 File 对象
                        const compressedFile = new File([blob], file.name, { type: file.type });
                        resolve(compressedFile);
                    } else {
                        quality *= 0.9;
                        width *= 0.9;
                        height *= 0.9;
                        compress();
                    }
                }, file.type, quality);
            }
            compress();
        };
    });
}

构建了一个Promise对象，不断递归压缩图片，将图片的宽、高、精度，都乘以0.9，这样做不断的压缩

直到图片总大小达到设定的大小，才返回到外部