小程序图片压缩

joyour

已于 2022-03-11 10:36:29 修改

阅读量491

点赞数

分类专栏：小程序文章标签： javascript css html

于 2022-03-07 17:22:53 首次发布

本文链接：https://blog.youkuaiyun.com/qq_25103439/article/details/123335101

版权

小程序专栏收录该内容

10 篇文章

订阅专栏

本文探讨了在小程序中如何处理图片压缩的问题，特别是在iOS环境下，由于canvas尺寸限制，需确保不超过700像素以避免显示空白。文章可能涉及JavaScript、CSS和HTML的相关技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<canvas style="width:600px;height:600px;position:fixed;left:9000px;"  id="picCanvas" type="2d"></canvas>

注：ios 的canvas尺寸不能太大，要不然会出现空白，最好在700以内

afterRead() {
   uni.chooseImage({
     count: 6, //默认9
     sizeType: ['original', 'compressed'],  //可以指定是原图还是压缩图，默认二者都有
     sourceType: ['camera','album'], //从相机或相册选择
     success: async (res: any) => {
       let f: any = res;
       const _this:any = this;
       console.log(res)
       for ( let i=0;i<f.tempFiles.length;i++){//for循环解决异步问题
          let  item = f.tempFiles[i]
         wx.showLoading({title:'图片加载...'})
         await this.$CompressedFiles(item.path,_this).then((data:any)=>{
           let index:any = item.path.lastIndexOf("//tmp/")
           let fileName:string = item.path.substring(index+6,item.path.length);
           this.fileList.push({path:item.path,base64:data,fileName:fileName});
           wx.hideLoading()
         })
       }
     }
   });
 }

$CompressedFiles(path:string,_this:any){
    return new Promise((resolve, reject)=>{
        wx.getImageInfo({
            src:path,
            success:function(res){
                //图片的宽度和高度
                let canvasRatio = 1.1;
                let path = res.path;
                let picWidth:any = res.width //图片原始长宽
                let picHeight:any = res.height
                let quality = 1;
                while (picWidth > 800 || picHeight > 800) { // 保证宽高在400以内
                    picWidth = Math.trunc(res.width / canvasRatio)
                    picHeight = Math.trunc(res.height / canvasRatio)
                    canvasRatio = canvasRatio + 0.1;
                    quality = 0.6;
                }
                const query = wx.createSelectorQuery()
                query.select('#picCanvas').fields({
                    node: true,
                    size: true
                }).exec(async (res) =>  {
                    try{

                       let canvas = res[0].node
                        let ctx = canvas.getContext('2d')
                        let dpr = wx.getSystemInfoSync().pixelRatio
                        _this.canvasWidth = picWidth / dpr
                        _this.canvasHeight = picHeight / dpr
                        canvas.width = picWidth
                        canvas.height = picHeight
                      const img = canvas.createImage()
                        img.src = path
                        img.onload = () => {
                            ctx.drawImage(img, 0, 0, picWidth, picHeight);
                            setTimeout(async () => {
                                await  wx.canvasToTempFilePath({
                                    fileType: "jpg",
                                    canvas: canvas,
                                    destWidth: picWidth,
                                    destHeight: picHeight,
                                    quality,
                                    success: async function (res:any) {
                                        console.log(2,ctx)
                                        //转为base64
                                       await wx.getFileSystemManager().readFile({
                                            filePath: res.tempFilePath,
                                            encoding: "base64",
                                            success: function (res1) {
                                                console.log(3, res.tempFilePath)
                                                let base64:any = ('data:image/png;base64,' + res1.data);
                                                resolve(base64)
                                            },
                                            fail:(res)=>{
                                                uni.showToast({
                                                    title:'图片转为base64失败',
                                                    icon:'none'
                                                })
                                            }
                                        })
                                    },
                                    fail: function (res) {
                                        console.log(res)
                                        reject(res)
                                    }
                                }, _this)
                            }, 600)
                        }
                    }catch (e) {
                    }
                })

            }
        })
    })

}