详解微信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 相关文章推荐
也说JavaScript中String类的replace函数
Sep 22 Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
一个JavaScript处理textarea中的字符成每一行实例
Sep 22 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 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 SDK ―― 公众号支付代码详解
2016/09/13 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
jquery中:input和input的区别分析
2011/07/13 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python ip正则式
2009/05/07 Python
python动态监控日志内容的示例
2014/02/16 Python
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
常用的HTML5列表标签
2017/06/20 HTML / CSS
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
市场营销方案范文
2014/03/11 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
高温慰问简报
2015/07/21 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS