有个需求要在微信企业号里面做开发,有个功能是选择图片,使用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"_blank" href="https://api.weixin.qq.com/cgi-bin/media/get" rel="external nofollow" >https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID。代码就不贴了,与上面的基本一致。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]