小程序上传图片调整宽高比例4/3

 // 上传图片回调
  uplaodFile (files) {
      // 文件上传的函数,返回一个promise
    return new Promise((resolve, reject) => {
      wx.getImageInfo({ // 查看图片
        src: files.tempFilePaths[0],
        success: (res) =>{
          const {path, width, height} = res;
          if(width/4 === height/3) { // 宽度合适直接上床
            wx.uploadFile({
              url: 'url', // 上传图片地址
              filePath: files.tempFilePaths[0],
              name: 'file',
              header: {
                'token': wx.getStorageSync('access_token')
              },
              success: (res) => {
                console.log(res);
                resolve({ urls: [JSON.parse(res.data).result] });
              },
              fail: (err) => {
                reject(err);
              }
            });
            return;
          }
         // 宽度填充至 4/3
          wx.showLoading({
            title: '填充图片中',
          })
          let newWidth  = 0;
          let newHeight  = 0;
          if(width/4 > height/3){
            newWidth = width;
            newHeight = width/4 * 3
          } else {
            newWidth = height/3 * 4
            newHeight = height
          }
          this.setData({
            canWidth:newWidth,
            canHeight:newHeight
          })
          const ctx = wx.createCanvasContext('shareFrends');
          ctx.width = width;
          ctx.height = height;
          ctx.fillStyle = '#fff'
          ctx.fillRect(0, 0, newWidth, newHeight);
          ctx.drawImage(path, (newWidth-width)/2, (newHeight-height)/2, width, height)
          console.log(width, newWidth, height, newHeight)
          ctx.draw(false, () => {
            setTimeout(() => {
              wx.canvasToTempFilePath({
                x: 0,
                y: 0,
                width:newWidth,
                height:newHeight,
                destWidth: newWidth,
                destHeight: newHeight,
                canvasId: 'shareFrends',
                fileType:'jpg',
                quality:1,
                success(res) {
                  wx.hideLoading()
                  wx.uploadFile({
                    url: config.host + '/api/mobile/oss/upload',
                    filePath: res.tempFilePath,
                    name: 'file',
                    header: {
                      'token': wx.getStorageSync('access_token')
                    },
                    success: (res) => {
                      console.log(res);
                      resolve({ urls: [JSON.parse(res.data).result] });
                    },
                    fail: (err) => {
                      reject(err);
                    }
                  });
                },
                fail(err){
                  reject(err);
                }
              })
            })
          })
          wx.hideLoading()
        }
      })
    });
  },

<canvas style="background:red;position: fixed;top: -10000px;width:{{canWidth}}px;height:{{canHeight}}px" canvas-id="shareFrends"></canvas>
posted @ 2021-12-28 19:36  懒惰ing  阅读(408)  评论(0编辑  收藏  举报