使用 微信JS-SDK 拍照 或者获取 相册 图片并展示

最近有在微信公众号的项目需要使用照相机，所以研究了一下微信的拍照功能，以下是具体流程：

根据微信的开发文档，想要使用微信的jssdk，需要5个步骤： 
（1）步骤一：绑定域名 
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 
（2）步骤二：引入JS文件 
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js 
备注：支持使用 AMD/CMD 标准模块加载方法加载 
（3）步骤三：通过config接口注入权限验证配置 
所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用；

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

注意：congfig里面的参数都是必填项，其中 appId 、timestamp 、nonceStr 、signature 是需要和微信交互获取的，在本项目中，是后台与微信交互，所以由后台获取，但需要传当前url地址给后台去签名； 
然后，jsApiList是一个数组，里面填入你想要使用的接口，具体有哪些接口可以查看微信文档，选择照片的话需要用到：chooseImage（拍照或从手机相册中选图接口）、getLocalImgData（获取本地图片接口）

（4）步骤四：通过ready接口处理成功验证 
config信息验证后会执行ready方法所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。

wx.ready(function(){
    // dosomething
});

对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。而我们需要调用相机或者相册属于触发型的操作，所以只需要在用户操作时调用接口即可：

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

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

  这里有个坑，不知道是不是我使用错误造成的，就是文档中说的：‘返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片’，并不能实现，所以需要用到getLocalImgData接口将图片显示给用户看。 
  - 获取本地图片接口：

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

getLocalImgData 接口只需要传一个参数 localId ，这个参数我们可以通过 chooseImage 接口拿到，然后 getLocalImgData 接口会返回一个 值 localData ，这个值就是图片的base64数据，可以用img标签显示，但需要注意的是，安卓和 IOS 机型得到的 localData 会不一样：IOS 得到的已经是加了base64格式的图片了，所以可以直接在img标签使用；但安卓机型返回的是 localData 是缺少 base64 格式前缀的，所以需要加上 ‘data:image/jpeg/png;base64,’，才可以在img标签使用。

所以最终代码是：

wx.chooseImage({
    count: 1, // 默认9，这里每次只处理一张照片
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function(res) {
        var localId = res.localIds[0].toString();//因为我们只取一张，所以只有将数组的第一项转字符串保存起来传给 getLocalImgData 方法即可
        wx.getLocalImgData({
            localId: localId, // 图片的localID
            success: function(res) {
                console.log(res);
                if(window.isIOS) {
                    console.log('ios');
                    //这里需要注意的是，尽管ios返回的是base64编码的字符串，但前缀还是有点不一样，是：'data:image/jgp/png;base64'；
                    //网上很多文章都说要按一下方式替换掉‘jgp’为‘jpeg’，但实际操作发现，不替换也可以正常显示，所以本人就不替换了，直接取值使用
                    //$scope.imgUrl = res.localData.replace('jgp', 'jpeg');//替换‘jgp’为‘jpeg’
                    $scope.imgUrl = res.localData;//赋值显示
                } else if(window.android) {
                    $scope.imgUrl = 'data:image/jpeg/png;base64,' + res.localData; // localData是图片的base64数据，可以用img标签显示
                }
            }
        });
    }
});

（5）步骤五：通过error接口处理失败验证

wx.error(function(res){
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

　　转载：https://blog.csdn.net/weixin_36882413/article/details/80674565