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

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

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

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

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

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

var self = this;
wx.ready(function () {
                wx.chooseImage({
                  count: 1, // 默认9
                  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                  sourceType:['camera'], //是相机
                  success: function (res) {
                  // console.log("res===chengong=",res)
                  let localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    if(localIds.length>0){
                      self.wxUploadPic(localIds);
                    }
                  }
                });
              });
              wx.error(function (res) {
                console.log("shibai",res)
              });

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属性显示图片
  }
});

预览图片接