详解微信JS-SDK选择图片遇到的坑


Posted in Javascript onAugust 15, 2018

有个需求要在微信企业号里面做开发,有个功能是选择图片,使用input标签肯定是不管用了,Android手机上不能多选,所以使用了微信的JS-SDK提供的相关API,这个地方真的是有坑,记录一下。按照文档直接引入js文件即可,如果使用的是Vue,也可以使用weixin-js-sdk,两种方式都可以。

图片在Android上无法预览

js-sdk的chooseImage 接口返回的结果是localId,类似于wxLocalResource://xxxxxx,如果想得到它的base64串需要再调用getLocalImgData方法,因为我们后台接口里需要用到这个base64串,所以通过这个接口来获取base64串作展示,而不是用文档里介绍的方法。那这里有个坑,从Android获取的localData是不带有base64前缀的,要处理一下。

selectImage: function () {
  let context = this;
  wx.chooseImage({
    count: 9,
    sizeType: ['compressed'], 
    sourceType: ['album', 'camera'], 
    defaultCameraMode: "normal", 
    success: function (res) {
      // localIds是在data里定义的一个localId数组
      context.localIds = res.localIds;
      // 不能直接遍历这个数组
      context.updateBase64Data(context.localIds.shift());
    },
    fail: function (res) {
      alert('选择图片失败:' + res.errMsg);
    },
  });
},
updateBase64Data: function (localId) {
  let context = this;
  wx.getLocalImgData({
    localId: localId, // 图片的localID
    success: function (res) {
      let localData = res.localData;
      let prefix = 'base64,';
      let index = localData.indexOf(prefix);
      let actData = localData;
      // 我现在是设置参数,如果是展示的话则应该是添加头部data:image/jpeg;base64,
      if (index > -1) {
        actData = localData.substring(index + 7);
      }
      // base64Array是在data里定义的一个base64串数组
      context.base64Array.push(actData);
      
      if (context.localIds.length > 0) {
        context.updateBase64Data(context.loaclIds.shift());
      } else {
        // 执行处理
      }
    },
    fail: function (res) {
      alert('选择图片失败:' + res.errMsg);
    },
  });
},

getLocalImgData获取多张图片无响应

chooseImage方法获取到是一个localId的数组,如果直接遍历这个数组去调用getLocalImgData时它只会执行一次,后面的无论怎样都不会执行,猜测应该是跟它localId的获取有关系。所以采取了上面代码中递归的方式调用,当连续调用uploadImage上传图片时也要这么做。

Android无法选择原图

尽管在chooseImage方法可以通过sourceType字段指定是原图还是压缩后的图,但是只要调用了getLocalImgData方法,那获取到的base64串展示一定是模糊的。你在想是不是Android上面不能使用原图啊,错了,仔细看IOS上面的图也是不清楚的,测试发现确实是这样,原图1.8M,使用js-sdk选择的原图只有不到240K,那为什么Android会模糊但是IOS比较清楚呢,你是不是又想这不是IOS和Android系统的区别吧,把同一张图片通过getLocalImgData方法获取到的base64串做比对发现,Android上得到的base64串前缀是以gCM开头,而IOS则是以/9j/开头,从PC上选择的图也是以/9j/开头,自己解析的图片也是以/9j/开头,所以不是因为压缩变模糊了,是因为使用了不一样的编码变模糊了。如果真的想选择原图,先把图片上传到微信服务器,然后使用获取临时素材的接口https://qyapi.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID,把图片下载下来,经测试这样其实也是有压缩的,这个是企业号的API如果用公众号地址是https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID。代码就不贴了,与上面的基本一致。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
全面理解面向对象的 JavaScript(来自ibm)
Nov 10 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
node.js中的console用法总结
Dec 15 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
快速搭建React的环境步骤详解
Nov 06 Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
原生js实现Flappy Bird小游戏
Dec 24 Javascript
深入了解js原型模式
May 30 Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 #Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 #jQuery
layui 监听表格复选框选中值的方法
Aug 15 #Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 #Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 #Javascript
vue升级之路之vue-router的使用教程
Aug 14 #Javascript
layui table 参数设置方法
Aug 14 #Javascript
You might like
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
php实现Mysql简易操作类
2015/10/11 PHP
yii数据库的查询方法
2015/12/28 PHP
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
layer弹出层扩展主题的方法
2019/09/11 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
python字符串过滤性能比较5种方法
2017/06/22 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
python设置环境变量的作用和实例
2019/07/09 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
Django框架表单操作实例分析
2019/11/04 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
python实现一个简单RPC框架的示例
2020/10/28 Python
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
老干部工作先进事迹
2014/08/17 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书