来来去去
来来去去
  • 发布:2020-05-30 11:23
  • 更新:2021-03-01 16:02
  • 阅读:1521

H5 图片压缩

分类:HTML5+

最近把app转成h5后,发现图片不能自动压缩。现在手机像素高,拍照都是5m左右的,这样的图片上传速度极慢。在社区里找了好久,发现可用的不多,我专门研究了下,分享代码,当前测试点不多,不排除有bug。

test: function(){  
                uni.chooseImage({  
                    count: 1,  
                    sizeType: ['compressed'],   
                    sourceType: ['camera'],  
                    success: async function (res) {  
                        const tempFilePaths = res.tempFilePaths;  

                        let img = '';  
                        /* #ifdef H5 */  
                        img = await this.comprossImage(tempFilePaths[0])  
                        /* #endif */  

                        uni.uploadFile({  
                            url: server + '/....',   
                            filePath: img || tempFilePaths[0],  
                            name: 'file',  
                            success: (uploadFileRes) => {  
                                let json = JSON.parse(uploadFileRes.data);  
                                if(1 ==json.state){  
                                    // 上传成功  
                                }else{  
                                    // 上传失败  
                                }  
                            },  
                            fail: function(err) {  
                                //其它错误  
                            }  
                        });  
                    }  
                });  
            },  
            comprossImage: async function(imgSrc,maxWidth) {  
                if(!imgSrc) return 0;  
                return new Promise((resolve, reject) => {  
                    maxWidth = maxWidth || 1024;/*默认压缩成1024宽*/  
                    uni.getImageInfo({    
                        src: imgSrc,    
                        success(res) {  
                            if(res.width <= maxWidth){/*太小的图片就不压缩了*/  
                                resolve(imgSrc);  
                                return;  
                            }  
                    let img = new Image();    
                    img.src = res.path;    

                     let canvas = document.createElement('canvas');    
                    let scale = res.width / res.height;  

                    let ctx = canvas.getContext('2d');  
                    canvas.width = maxWidth;  
                    canvas.height = maxWidth / scale;  
                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);  

                    /* 默认图片质量为0.7 */  
                    var quality = 0.7;  
                    /* 回调函数返回base64的值 */  
                    var base64 = canvas.toDataURL('image/jpeg', quality);  

                            resolve(base64);    
                        }    
                    });    
                })    
            },
0 关注 分享

要回复文章请先登录注册

妖妖零

妖妖零

回复 妖妖零 :
我的,我发现问题了
2021-03-01 16:02
妖妖零

妖妖零

ctx.drawImage 我用这个怎么变成剪切
2021-03-01 15:09