前端压缩图片并上传

前言：最近遇到上传照片太大，10M以上，后台大概设置了上传大小的限制，会报错，所以想着自己前端这边试着看看能不能压缩图片，发现并不难，分享一下。

压缩整体流程大概是：fileObj->canvas->img->blobObj->fileObj

以下为代码：

// 对图片进行压缩
function compress(fileObj,upload) { 
    //函数传参说明   fileObj：input的files[0]文件对象  upload自定义文件上传函数，根据需要自己替换
    let reader = new FileReader()
    reader.readAsDataURL(fileObj)
    reader.onload = function(e) {
        let image = new Image() //新建一个img标签（还没嵌入DOM节点)
        image.src = e.target.result
        image.onload = function() {
            let canvas = document.createElement('canvas'), 
            context = canvas.getContext('2d'),
            imageWidth = image.width / 2,    //压缩后图片的大小
            imageHeight = image.height / 2,
            data = ''

            canvas.width = imageWidth
            canvas.height = imageHeight

            context.drawImage(image, 0, 0, imageWidth, imageHeight)
            data = canvas.toDataURL('image/png')
            
            //压缩完成 
            // document.getElementById('img').src = data;
           
           canvas.toBlob(function(blobObj){
                
                //blob转file
                let files = new window.File([blobObj], fileObj.name, {type: blobObj.type})
                // console.log(files)
               upload(files)     //调用继续上传
                return blobObj
            })
        }
    }
}

小建议：对于不大的图片没必要进行压缩，会损害图片质量，可以对图片大小进行判断，再决定是否要压缩图片。

if(file.size>3000000){
       console.log('文件大于3M');  
       compress(file)  //进行压缩
 }else{
         upload( file);    //直接上传
 }