美文网首页
上传照片进行压缩到指定的大小

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

作者: Pluto_7a23 | 来源:发表于2021-04-06 14:32 被阅读0次
    
    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})
    }
    

    相关文章

      网友评论

          本文标题:上传照片进行压缩到指定的大小

          本文链接:https://www.haomeiwen.com/subject/mjiskltx.html