微信小程序调用摄像头，实现图片压缩上传

这篇文章主要为大家详细介绍了微信小程序实现图片压缩功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下，下面直接上代码
先是wxml:

<view bindtap='takePictures'>选择图片</view>
<canvas canvas-id="attendCanvasId" style="width:300px;height:300px;position: absolute;left:-300px;top:-300px"></canvas>
<image src="{{attendSuccessImg}}"></image>

下面是js

Page({ 
  /**   * 页面的初始数据   */
  data: {
    attendSuccessImg: "",
    canvasImgUrl:'',
    src:""
  },
  /**   * 生命周期函数--监听页面加载   */ 
  onLoad: function(options) {},
  // 点击照相
  takePictures: function () {
    var that = this;
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
     // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;

        that.setData({
          attendSuccessImg: tempFilePaths[0]
        });

        // 上传图片
        //判断机型
        var model = "";
        wx.getSystemInfo({
          success: function (res) {
            var that = this;
            model = res.model;
          }
        })
        if (model.indexOf("iPhone") <= 0) {
          // that.uploadFileOpt(that.data.attendSuccessImg);
          console.log(111111)
        } else {
          drawCanvas();

        }

        // 缩放图片
        function drawCanvas() {
          const ctx = wx.createCanvasContext('attendCanvasId');
          ctx.drawImage(tempFilePaths[0], 0, 0, 94, 96);
          ctx.draw();
          that.prodImageOpt();
        }
      }
    });
  },

  // 生成图片
  prodImageOpt: function () {
    var that = this;
    wx.canvasToTempFilePath({
      canvasId: 'attendCanvasId',
      success: function success(res) {
        that.setData({
          canvasImgUrl: res.tempFilePath
        });
        // 上传图片
        that.uploadFileOpt(that.data.canvasImgUrl);
      },
      complete: function complete(e) {
      }
    });
  },

})