小程序图片转base64

11 篇文章 0 订阅

1、动态tabBar,item项,相册或者手机拍照

clickPhoto() {
  var that = this;
  wx.showActionSheet({
    itemList: ['从相册中选择', '拍照'],
    itemColor: "#2874dc",
    success: function (res) {
      if (!res.cancel) {
        if (res.tapIndex == 0) {
           that.chooseWxImageShop('album'); // 从相册中选择

        } else if (res.tapIndex == 1) {
           that.chooseWxImageShop('camera'); // 手机拍照
        }
       }
    }
  })
},

2、用户选择图片

chooseWxImageShop: function (type) {
    var that = this;
      wx.chooseImage({
      count: 4, // 允许用户选择几张图片
      sizeType: ['original', 'compressed'],
      sourceType: [type],
      success: function (res) {
        var arr = that.data.photoArr.concat(res.tempFilePaths);
        that.setData({
          photoArr: arr
        })
        
        var imgArr = [];
        if (arr.length != 0){
          console.log('外层');
          for (var i in arr) {
            // 调函数图片转 base64
            that.urlTobase64(arr[i]).then((res) => {
              imgArr.push(res);
              that.baseImgData.imgArr = imgArr;
            
            })
            .catch((res) => {
            // app.setToast('请求失败');
            })
          }
          that.setData({
            baseImgData: imgArr
          })
        }
      },
      fail: function (res) {
        console.log('photo fail', res)
      }
    })
  },

3、图片转base64传临时路径

urlTobase64(url) {
  return new Promise((resolve, reject) => { // promise 解决异步问题
    wx.request({
      url: url,
      responseType: 'arraybuffer', //最关键的参数,设置返回的数据格式为arraybuffer
      success: (res) => {
        var base64 = wx.arrayBufferToBase64(res.data);
        base64 = 'data:image/jpeg;base64,' + base64;
        resolve(base64);
      },
      fail: (res) => {
        reject(false);
      }
    })
  })
},
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值