使用微信的 JS SDK 选取手机照片并进行上传

CntChen 发布于2019-08-21 11:36 / 1900人阅读

摘要：实现过程选取照片这里使用微信的方法，得到照片在本地存储的，十分简单获取照片数据主要是获取照片格式的数据用于上传，但是过程比较曲折，先后尝试了两种方法。

前言

项目中遇到需要选取照片上传的需求，因为网页运行在微信的浏览器里面，所以想到了用微信的 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 构造表单数据的办法，在我的另一篇文章有讨论过，此处不再赘述。

云服务器 GPU云服务器 js 微信的返回事件 js照片上传页面微信js sdk 微信的html代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86918.html

html5 上传本地图片处理各种问题

摘要：原文还是在简书上上传本地图片处理各种问题这是最近给公司写一个项目，项目要求大概是这样子上传手机本地图片，然后裁剪后加的需求能够旋转图片，用于裁剪后面加的需求填写各种文字，选择颜色，之后把文字和个相关的图片，水印到裁剪的图片上，上传服务器生成原文还是在简书上： html5 上传本地图片处理各种问题这是最近给公司写一个项目，项目要求大概是这样子：1.上传手机本地图片，然后裁剪（后加的需...

iOS122 2019-08-19 17:16 评论0 收藏0
html5 上传本地图片处理各种问题

摘要：原文还是在简书上上传本地图片处理各种问题这是最近给公司写一个项目，项目要求大概是这样子上传手机本地图片，然后裁剪后加的需求能够旋转图片，用于裁剪后面加的需求填写各种文字，选择颜色，之后把文字和个相关的图片，水印到裁剪的图片上，上传服务器生成原文还是在简书上： html5 上传本地图片处理各种问题这是最近给公司写一个项目，项目要求大概是这样子：1.上传手机本地图片，然后裁剪（后加的需...

Taste 2019-08-01 14:59 评论0 收藏0
[打怪升级]小程序评论回复和发帖功能实战（二）

摘要：发帖的功能只要理清思路，其实并不复杂，利用机器做内容审查是关键，直接关系到小程序的整体安全。内容检查重点由于内容安全对于小程序运营至关重要，稍有不慎就容易导致小程序被封，所以在这块的校验除了常规人工检查外，我们还可以用到微信的内容安全。 showImg(https://segmentfault.com/img/remote/1460000019955210?w=658&h=440); ...

ThinkSNS 2019-08-26 10:31 评论0 收藏0