vue-h5项目调用微信的相机相册功能

红太狼 2022-12-08 04:21 690阅读 0赞

vue-h5项目调用微信的相机相册功能

微信的官网网址为:https://developers.weixin.qq.com/doc/offiaccount/OA\_Web\_Apps/JS-SDK.html  
[微信公众号使用js-sdk的接口链接][js-sdk]

以下是我本次调用微信相机获取本地图片的一个项目经验  
1，在html文件中引入微信的接口

2，在utils.js中判断是否是微信客户端接口

//是否是微信客户端 //isWxClient 会返回一个true 和flase  是微信浏览器打开返回true  不是返回false
       isWxClient(){
         return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1
       },

3，获取微信的签名信息等

let param = {url:url}
              this.$http.getWxQianInfo(param).then(res =>{
                if(res.data.code === 0){
                  wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: res.data.data.appid, // 必填，公众号的唯一标识
                    timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
                    signature: res.data.data.signature, // 必填，签名，见附录1
                    jsApiList:['chooseImage','uploadImage','getLocalImgData']
                  })
                }
    
              })

4，调用wx.chooseImage

5，以base64将图片上传到本地服务器中的方法，getLocalImgData能够转换成base64

wxUploadPic(localIds){
            var self = this
            wx.getLocalImgData({
              localId: localIds[0].toString(),
              success: function (resp) {
                const localData = resp.localData;
                let imageBase64 = '';
                if (localData.indexOf('data:image') == 0) {
                  //苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接
                  imageBase64 = localData;
                } else {
                  //此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换
                  //此时一个正常的base64图片路径就完美生成赋值到img的src中了
                  imageBase64 = 'data:image/jpeg;base64,' + localData.replace(/\n/g, '');
                }
                //console.log("base64===",imageBase64)
               // alert(imageBase64)
                if (imageBase64) {
                  let param = {
                    base64data: imageBase64,
                  }
                  console.log('param',param)
                  if(self.showImgSize(imageBase64) > 2) {
                    Toast('请使用小于2MB的图片')
                    return
                  } else {
                    self.resumeMsg.photo = param.base64Data
                   // console.log("上传图片")
                    //alert("上传图片")
                    self.$http.uploadHeadPhoto(param, ([code, res]) => {
                      // self.$http.uploadHeadPhoto({base64Data: param.base64Data}, ([code, res]) => {
                     // console.log(code)
                      console.log('res',res)
                     // alert("上传中")
                      if(res.code == 0){
                        self.getPersonalOne()
                      }
                      /*if(code == 200) {
                        self.getPersonalOne()
                      }*/
                    })
                  }
                } else {
                  Toast("选择图片出了点问题，请稍后再试下吧");
                }
              }
            });
          },

以上完成了拍照的功能

其他：getLocalImgData，获取图片的base64数据

wx.getLocalImgData({
      localId: '', // 图片的localID
      success: function (res) {
        var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
      }
    });

拍照或从手机相册中选图接口

wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
      var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
      }
    });
    
    预览图片接

[js-sdk]: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html