关注互联网应用及运维技术的个人博客

在小程序中通过canvas进行图片压缩

思路

拍照、在canvas上绘制图片、导出图片。

在导出图片的过程中通过设置图片的尺寸和质量来进行图片压缩,如果要保证图片的完整性,就是只能降低图片质量来进行图片压缩了。小程序图片压缩

拍照

在小程序中使用相机组件camera拍照图片:

<camera device-position="front" flash="off" frame-size="small" binderror="error" class="photo" mode="normal" wx:if="{{hide}}">
  </camera>
  <view class="btn-area" wx:if="{{hide}}">
    <button type="primary" bindtap="takePhoto">拍照</button>
  </view>
  <view class="preview">
    <!-- <view class="preview-tips">预览</view> -->
    <image wx:if="{{src}}" mode="widthFix" src="{{src}}"></image>
  </view>
  <canvas canvas-id='pressCanvas' class='press-canvas' style='width: {{ canvasWidth }}px; height: {{ canvasHeight }}px;position:absolute;left:{{-canvasWidth}}px;bottom:{{-canvasHeight}}px' wx:if="{{canvas}}"></canvas>

拍照得到图片之后,使用wx.getFileInfo()读取图片文件的大小,判断图片大小是否符合我们的要求。然而wx.getFileInfo()读取出的文件大小单位是byte,需要转化为我们要求限制的大小单位,或者是把我们要求的大小单位转化为byte。

假设我们的限制是图片大小不能超过100kb:

res.size / 1024 > 100

当图片的大小小于100kb时,直接进行下一步操作;

当图片大小大于100kb时,使用wx.getImageInfo()读取图片的信息【主要的图片的宽高】。再把图片绘制到canvas画布上,通过wx.canvasToTempFilePath()导出图片。

在wx.canvasToTempFilePath()方法中设置要导出图片的大小【主要是图片的宽高,图片的质量】

js完整代码:

 // 拍照
  takePhoto() {
    const that = this;
    const ctx = wx.createCameraContext();
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        console.log(res)
        wx.getFileInfo({
          filePath: res.tempImagePath,
          success: (result) => {
            console.log(result)
            console.log(result.size / 1024 + "kByte");

            if (result.size / 1024 > 100) {
              wx.showToast({
                title: '图片大于100KB',
              })
              wx.getImageInfo({
                src: res.tempImagePath,
                success(rr) {
                  console.log(rr)
                  var ctx = wx.createCanvasContext('pressCanvas');
                  var ratio = 1;
                  var canvasWidth = rr.width
                  var canvasHeight = rr.height;
                  var quality = 0.6; //图片质量
                  //设置canvas尺寸
                  that.setData({
                    canvasWidth: canvasWidth,
                    canvasHeight: canvasHeight
                  });
                  console.log("canvasWidth===" + canvasWidth)
                  console.log("canvasHeight===" + canvasHeight)
                  ctx.drawImage(res.tempImagePath, 0, 0, rr.width, rr.height); //将图片填充在canvas上
                  ctx.draw(false, setTimeout(function() {
                    wx.canvasToTempFilePath({
                      canvasId: 'pressCanvas',
                      width: 0,
                      height: 0,
                      destWidth: rr.width,
                      destHeight: rr.height,
                      fileType: 'jpg',
                      quality: quality,
                      success: function success(path) {
                        console.log(path)
                        
                        wx.getFileInfo({
                          filePath: path.tempFilePath,
                          success(data) {
                            console.log("canvas图片大小为==" + data.size / 1024 + "kb")
                          }
                        })
                      },
                      fail: function fail(e) {}
                    });
                  }, 1000));
                }
              })
            } else {
              
              wx.showToast({
                title: '图片小于100KB',
              })
            }
          },
          fail: (res) => {},
          complete: (res) => {},
        })

        that.setData({
          hide: false,
          canvas: true
        })
      }
    })
  },
赞(0)
未经允许不得转载:飞天狒狒 » 在小程序中通过canvas进行图片压缩

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址