web端图片压缩

之前做了uniapp的图片压缩，那么web端的图片压缩方法我也在这里记录下

这里做了判断超出一定大小后才会去压缩，这边的大小可以自定义

直接上代码：

/**
 * 对图片进行压缩
 * @param {file} file 文件
 * */
export const compressionImage = (file) => {
    if(Array.isArray(file)) {
        return Promise.all(file.map(item => compressionImage(item)));
    }
    else {
        return new Promise(resolve => {
            // 获取文件信息
            const { type, size, name } = file;

            // 比例
            let ratio = 1;
            // 默认计算的大小
            const defaultSize = 1024 * 1024;
            // 判断是否需要缩放
            if(size > defaultSize) {
                ratio = Math.sqrt(size / defaultSize);
            }

            // 获取FileReader对象
            const reader = new FileReader();
            reader.onload = ({ target: { result: src } }) => {
                // 创建图片对象
                const image = new Image();
                // 设置路径
                image.src = src;

                // 加载后
                image.onload = () => {
                    // 获取canvas
                    const canvas = document.createElement('canvas');
                    // 设置canvas的宽高...
                    canvas.width = image.width / ratio;
                    canvas.height = image.height / ratio;

                    // 获取上下文对象
                    const context = canvas.getContext('2d');
                    // 绘制图片
                    context.drawImage(image, 0, 0, image.width / ratio, image.height / ratio);
                    // 返回图片的url
                    const canvasURL = canvas.toDataURL(type);
                    // 转换文件...
                    const buffer = atob(canvasURL.split(',')[1]);
                    let length = buffer.length;
                    const bufferArray = new Uint8Array(new ArrayBuffer(length));
                    while (length--) {
                        bufferArray[length] = buffer.charCodeAt(length);
                    }

                    // 返回...
                    resolve(new File([bufferArray], name, { type }));
                }
            }
            reader.readAsDataURL(file);
        });
    }
}

就这样🤪！