详解微信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 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
JQuery小知识
Oct 15 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
基于node.js之调试器详解
Aug 22 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
JavaScript实现简单的弹窗效果
May 19 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
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
javascript 时间比较实现代码
2009/10/28 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
JavaScript如何操作css
2020/10/24 Javascript
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
Python返回数组/List长度的实例
2018/06/23 Python
详解Python 解压缩文件
2019/04/09 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
2014年质检工作总结
2014/11/26 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
自我推荐信格式模板
2015/03/24 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
小学教师见习总结
2015/06/23 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书