uni-app 小程序图片压缩上传

浅浅的花香味﹌ 2022-09-16 04:56 18阅读 0赞

选择图片 **uni.chooseImage** 、**wx.canvasToTempFilePath**(canvas 转图片)、**uni.getFileSystemManager**(图片转 base64，也可canvas直接转 base64 )

html

data

data(){
        return {
          cWidth: 0,
          cHeight : 0
        }
    }

methods

compressImg(src, fn) {
          let that = this;
          uni.getImageInfo({
            src: src,
            success: (img) => {
              //---------利用canvas压缩图片--------------
              var ratio = 2;
              var canvasWidth = img.width; //图片原始长宽
              var canvasHeight = img.height;
              while (canvasWidth > 750 || canvasHeight > 750) {
                // 保证宽高在400以内
                canvasWidth = Math.trunc(img.width / ratio);
                canvasHeight = Math.trunc(img.height / ratio);
                ratio++;
              }
              that.cWidth = canvasWidth;
              that.cHeight = canvasHeight;
              //----------绘制图形并取出图片路径--------------
              var ctx = wx.createCanvasContext("canvas");
              ctx.drawImage(img.path, 0, 0, canvasWidth, canvasHeight);
              ctx.draw(
                false,
                setTimeout(function () {
                  wx.canvasToTempFilePath({
                    canvasId: "canvas",
                    destWidth: canvasWidth,
                    destHeight: canvasHeight,
                    success: function (res) {
                      fn(res);
                    },
                    fail: function (res) {
                      console.log("fail => ", res.errMsg);
                      fn(res);
                    },
                  });
                }, 100)
              ); //留一定的时间绘制canvas
            },
          });
        },
    
        uploadImg() {
          let that = this;
          uni.chooseImage({
            count: 1, //上传图片的数量，默认是9
            sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
            success: function (res) {
              const tempFilePaths = res.tempFilePaths; //拿到选择的图片，是一个数组
              that.compressImg(tempFilePaths[0], (res) => {
                console.log("小程序压缩后图片 => ", res.tempFilePath);
                // that.base64 = res.tempFilePath;
                // 图片转base64, 也可直接canvas转
                uni.getFileSystemManager().readFile({
                  filePath: res.tempFilePath,
                  encoding: "base64",
                  success: (r) => {
                    let base64 = "data:image/jpeg;base64," + r.data;
                    that.base64 = base64;
                    uni.showToast({
                      title: "图片识别中...",
                      duration: 20000,
                      mask: true,
                      icon: "loading",
                    });
                    // that.uploadAjaxbase64(base64,tempFilePaths[0]);// 接口上传
                  },
                });
              });
            },
          });
        },