详解微信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 相关文章推荐
ExtJS实现文件下载的方法实例
Nov 09 Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 Javascript
JavaScript AJAX之惰性载入函数
Aug 27 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
基于Vue中的父子传值问题解决
Jul 27 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 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中利用XML技术构造远程服务(下)
2006/10/09 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
详解ESLint在Vue中的使用小结
2018/10/15 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
物流管理毕业生自荐信
2013/10/24 职场文书
九月份红领巾广播稿
2014/01/22 职场文书
护理专业自荐书
2014/06/04 职场文书
表扬信格式模板
2015/05/05 职场文书
元旦晚会开场白
2015/05/29 职场文书
污染环境建议书
2015/09/14 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书
redis数据结构之压缩列表
2022/03/21 Redis
python微信智能AI机器人实现多种支付方式
2022/04/12 Python
MySql分区类型及创建分区的方法
2022/04/13 MySQL