媒介

项目中碰到须要拔取照片上传的需求，由于网页运行在微信的浏览器内里，所以想到了用微信的 js-sdk 供应的拔取照片功用，来优化用户体验。

完成历程

1、拔取照片

这里运用微信 js-sdk 的 chooseImage 要领，获得照片在当地存储的 id，非常简朴：

wx.chooseImage({
  count: 1, 
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success: function (res) {
    var localId = res.localIds[0];
  }
)};

2、猎取照片数据

主如果猎取照片 base64 花样的数据用于上传，然则历程比较迂回，前后尝试了两种要领。

尝试一：设置 img 元素的 src 属性

依据微信的官方开辟文档，获得的 localId 能够直接作为 img 元素的 src 属性举行显现，因此起首想到的是在 img 的 load 事宜中组织 canvas，然后猎取数据：

$('img.avatar-temp').on('load', function (e) {
  var image = e.target;
  var canvas = document.createElement('canvas');
  canvas.width = image.width;
  canvas.height = image.height;
  canvas.getContext('2d').drawImage(image);
  
  var dataUrl = canvas.toDataURL();
});

wx.chooseImage({
  count: 1, 
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success: function (res) {
    var localId = res.localIds[0];
    $('img.avatar-temp').attr('src', localId);
  }
)};

但是不幸的是，将 localId 设置进 src 以后，图片能显现，也没有报错，然则就是死活不触发 load 事宜，也查不到是什么缘由，因此此计划行不通。

尝试二：挪用 js-sdk 的 getLocalImgData 要领

再次查阅文档，得知另有 getLocalImgData 用于猎取当地图片数据，坚决尝试：

wx.chooseImage({
  count: 1, 
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success: function (res) {
    var localId = res.localIds[0];
    wx.getLocalImgData({
      localId: localId,
      success: function (res) {
        var localData = res.localData;
      }
    )};
  }
)};

如上，获得的 localData 即为拔取照片的 base64 花样的数据。这里有两个处所须要注重的：
1、iOS 体系内里获得的数据，范例为 image/jgp，不知道是 bug 照样什么缘由，因此须要替代一下：

localData = localData.replace('jgp', 'jpeg');

2、安卓体系获得的数据，是没有 data:image/jpeg;base64, 前缀的。

3、上传照片

上传照片采纳 FormData API 组织表单数据的方法，在我的另一篇文章有讨论过，此处不再赘述。