前端js对图片进行尺寸及质量压缩处理

function:

/**
 * 图片尺寸及质量压缩
 * @param file 图片文件
 * @param maxWidth 最大宽度，若图片超过此宽度则缩放到此宽度，同时高度进行等比例缩放
 * @param quality 质量，0-1之间的值
 * @returns 带着压缩处理后的base64数据的Promise对象
 */
function scaleImage(file, maxWidth = 800, quality) {
    return new Promise(function (resolve, reject) {
        let fileType = file.type
        let scaledBase64Data = ''
        let reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function () {
            let img = new Image()
            const originBase64Data = this.result
            img.src = originBase64Data // 文件base64数据
            img.onload = function () { //图片加载完后
                console.log('image width:', img.width)
                console.log('image height:', img.height)
                let scaleWidth = img.width
                let scaleHeight = img.height
                if (img.width > maxWidth) {
                    console.log('图片超大，进行尺寸缩小处理')
                    scaleWidth = maxWidth
                    scaleHeight = img.height * ( maxWidth / img.width )
                    console.log('image scaleWidth:', scaleWidth)
                    console.log('image scaleHeight:', scaleHeight)
                    const canvas = document.createElement("canvas");
                    const context = canvas.getContext("2d");
                    canvas.width = scaleWidth;
                    canvas.height = scaleHeight;
                    context.drawImage(img, 0, 0, scaleWidth, scaleHeight);
                    scaledBase64Data = canvas.toDataURL(fileType, quality)
                    console.log('scaledBase64Data', scaledBase64Data)
                    resolve(scaledBase64Data)
                } else {
                    resolve(originBase64Data)
                }
            }
        }
        reader.onerror = function (error) {
            reject(error)
        }
    })
}

用法：

scaleImage(file, 800, 1).then((base64) => {
    console.log('scaledBase64Data:', base64)
    document.getElementById('myImage').src = base64
})