本文共 2084 字，大约阅读时间需要 6 分钟。

微信小程序压缩图片及上传至云存储

目的：

将选择的任意图片压缩，给定压缩后的图片高度宽度最大值并保证同比例压缩，最后上传至微信云存储。

思路：

1 使用wx.compressImage函数

       此函数只对jpg图片有效，其他图片格式不行；

2 使用canvas组件，先将图片绘制到canvas中:调用canvas.dragImage和canvas.draw函数，然后利用wx.canvasToTempFilePath将canvas的内容输出。

注意点：canvas是设备相关的，需要获取设备的像素比来最终确定图片的大小。

具体步骤：

1 在wxml中添加canvas元素

<canvas style=”width:{

{canvasWidth}}px;height:{ {canvasHeight}}px” canvas-id=”canvas-id”></canvas>

canvasWidth,canvasHeight分别是canvas的宽度和高度，这两个变量放在页面的data中，因为需要根据所选的图片大小来改变，也方便压缩后隐藏（设置为0），canvas的ID是必须的，后面要用到。

2 在wxss文件中设置样式

.canvas-id{position:absolute;left:-99999px}

3 js中实现具体的实现

    //压缩时高度和宽度的最大值

    var _maxWidth = 280;

    var _maxHeight = 180;

    //图片压缩后的大小

    var _targetWidth = 0,_targetHeight = 0;

    //获取设备像素比:一个设备像素对应多少个图片像素

var _pixelRatio = wx.getSystemInfoSync().pixelRatio;

//  选择图片

wx.chooseImage({

      count: 1, //只选择一个图片文件

      success:(res)=>{

        var _imageFile = res.tempFilePaths[0];//获取文件路径

        //获取文件信息：主要是高度和宽度，然后计算压缩后的图片高度和宽度

//这里设置最大高度和宽度，并且同比例压缩

wx.getImageInfo({

          src: res.tempFilePaths[0],

          success:(imageInfoRes)=>{

            //计算压缩后的图片大小

            if (imageInfoRes.height / imageInfoRes.width > _maxHeight / _maxWidth){          

              _targetWidth  = _maxHeight * imageInfoRes.width / imageInfoRes.height/_pixelRatio;

              _targetHeight = _maxHeight/_pixelRatio;

            }

            else{

              _targetWidth  = _maxWidth/_pixelRatio;

              _targetHeight = _maxWidth * imageInfoRes.height / imageInfoRes.width/_pixelRatio;

            }

            //更新画布大小（这个肯定是需要的）

            this.setData({

              canvasWidth:_targetWidth,

              canvasHeight:_targetHeight

            });

            //就是WXML里面canvas的ID

            var _canvasID = 'canvas-id';

            let ctx = wx.createCanvasContext(_canvasID);

            ctx.clearRect(0, 0, _targetWidth, _targetHeight);

            ctx.drawImage(_imageFile, 0, 0, _targetWidth, _targetHeight);

  

             //为了保证存储成功，需要将存储图片的代码放到draw的回调函数中

 ctx.draw(false,()=>{

              wx.canvasToTempFilePath({

                fileType:'png', //图片格式，可以用其他格式

                canvasId: _canvasID,

                success:(saveRes)=>{

                 //将压缩后的图片上传到云存储,云存储中已经有一个images的文件夹，至于如何开通云存储可以自己查下，很简单

                  wx.cloud.uploadFile({

                    cloudPath:”images/" + (new Date()).valueOf() + ".png",

                    filePath:saveRes.tempFilePath,

                    success:(uploadFileRes)=>{

                    }

                  });

 

                  //更新画布大小,设置为0，免得显示出来

                  this.setData({

                    canvasWidth:0,

                    canvasHeight:0

                  });

                }

              })

            });

          }

        })

      },

      fail:console.error

    })

 

 

转载地址：https://blog.csdn.net/hulinhulin/article/details/115276453 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！