压缩照片大小

// 文件转为url
function filetoDataURL(file, fn) {
    const reader = new FileReader()
    reader.onloadend = function (e) {
        fn(e.target.result)
    }
    reader.readAsDataURL(file)
}

// url 转为image
function dataURLtoImage(dataurl, fn) {
    const img = new Image()
    img.onload = function () {
        fn(img)
    }
    img.src = dataurl
}

// 通过canvas重置文件大小
function canvasResizetoFile(canvas, quality, fn) {
    canvas.toBlob(function (blob) {
        fn(blob)
    }, 'image/jpeg', quality)
}
// 将图片转为canvas
function imagetoCanvas(image){
    const cvs = document.createElement('canvas')
    const ctx = cvs.getContext('2d')
    cvs.width = image.width
    cvs.height = image.height
    ctx.drawImage(image, 0, 0, cvs.width, cvs.height)
    return cvs
}

// 压缩文件大小
function fileResizetoFile(file, quality, fn) {
    filetoDataURL(file, function (dataurl) {
        dataURLtoImage(dataurl, function (image) {
            canvasResizetoFile(imagetoCanvas(image), quality, fn)
        })
    })
}

// 最终调用压缩方法, 获取到压缩后的文件

fileResizetoFile(this.state.file, 0.5, res => {
    console.log(res) // 返回 blob格式文件
}

将图片转为base64格式字符串

function convertImgToBase64 (url, callback, outputFormat) {
        let canvas = document.createElement('canvas')
        let ctx = canvas.getContext('2d')
        let img = new Image()
        img.crossOrigin = 'Anonymous'
        img.onload = function(){
            canvas.height = img.height
            canvas.width = img.width
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
            callback(canvas.toDataURL(outputFormat || 'image/png'))
            canvas = null
        }
        img.src = window.URL.createObjectURL(url)
    }

上传调用

fileResizetoFile(this.state.file, 0.5, res => {
    console.log(res) // 返回 blob格式文件
    convertImgToBase64(res, base64Str => {
       // 最终获取到base64
        console.log(base64Str)
        // ajax.post(xxx)
        // ...
    })
}

感谢 JS中图片压缩