上传照片进行压缩到指定的大小

2021-04-06  本文已影响0人  Pluto_7a23

import {Message} from 'element-ui'
export const compress = (file) => {
   
        return new Promise((resolve, reject) => {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'video/mp4';
            // console.log(file.size)
            let isLt2M = file.size / 1024 / 1024 > 4 // 判定图片大小是否小于4MB
            // if(isLt2M) {
            //     reject()
            // }
            if (!isJPG) {
                Message.error('上传图片视频只能是 JPG/PNG/MP4 格式!');
            }
            // console.log( file.type === 'video/mp4')
            if( file.type === 'video/mp4'){
                resolve()
                return 
            }else{

                    let image = new Image(), resultBlob = '';
                    image.src = URL.createObjectURL(file);
                    image.onload = () => {
                        // 调用方法获取blob格式,方法写在下边
                        if(file.size / 1024 / 1024 < 4){
                            resultBlob = compressUpload(image, file);
                            // console.log('小于4M')
                        }else{
                            resultBlob = compressUpload(image, file);
                        }
                    // console.log(resultBlob)
                        resolve(resultBlob)
                    }
                    image.onerror = () => {
                        reject()
                    }
            }
        })
}

  /* 图片压缩方法-canvas压缩 */
function  compressUpload(image, file) {
                
    let canvas = document.createElement('canvas')
    let ctx = canvas.getContext('2d')

    let initSize = image.src.length
    let { width } = image, { height } = image
    // console.log(width,height)
    if(width < 15 || height < 15) {
        return  0
    }

    canvas. width = width > 4096 ? 4096 : width 
    canvas.height = height > 4096 ? 4096 : height 

    ctx.fillRect(0, 0, canvas.width, canvas.height)

    ctx.drawImage(image, 0, 0, width, height)
    
    // 进行最小压缩0.1
    let i = 1;
    while (i>0.1) {
        // 压缩后调用方法进行base64转Blob,方法写在下边
        let compressData = canvas.toDataURL( 'image/jpeg' || 'image/png',i)
       
        let blobImg = dataURItoBlob(compressData) 
        // console.log(blobImg.size/1024/1024)

        if(blobImg.size/1024/1024 < 4  ){ //压缩到4兆以内
            return blobImg
        }
        // console.log(blobImg.size/1024/1024,blobImg,i)
//不同大小的照片  压缩的速度
        if(blobImg.size/1024/1024 > 10){i-= 0.06}
         if((blobImg.size/1024/1024 < 10) && (blobImg.size/1024/1024 > 8) ){i-= 0.06}
         if((blobImg.size/1024/1024 < 8) && (blobImg.size/1024/1024 > 6) ){i-= 0.03}
         if((blobImg.size/1024/1024 < 6) && (blobImg.size/1024/1024 > 5 )){i-= 0.02}
         if((blobImg.size/1024/1024 < 5) && (blobImg.size/1024/1024 > 3) ){i-= 0.01}
    }
}

/* base64转Blob对象 */
function dataURItoBlob(data) {
    let byteString;
    if(data.split(',')[0].indexOf('base64') >= 0) {
        byteString = atob(data.split(',')[1])
    }else {
        byteString = unescape(data.split(',')[1])
    }
    let mimeString = data
        .split(',')[0]
        .split(':')[1]
        .split(';')[0];
    let ia = new Uint8Array(byteString.length)
   
    for( let i = 0; i < byteString.length; i += 1) {
        ia[i] = byteString.charCodeAt(i)
    }
    return new Blob([ia], {type: mimeString})
}
上一篇下一篇

猜你喜欢

热点阅读