必踩坑！在微信sdk调用chooseImage获取图片后采取getLocalImgData转换base64

开发产品的第2阶段中，由于用户需要使用签到打卡的图片进行引导分享，在用户上传中针对图片进行压缩后返回调用，在此之前采用过canvase进行压缩，但项目时间紧迫需要进行一定的兼容和改善后就放弃了（代码健壮性必须要全面滴）！

因为产品使用的是微信sdk，所以果断就调用内部接口进行处理！直接开门见山~

一、配置环境的首要条件中引入微信sdk(必须在1.2版本或以上！)

二、在wx.config需要申明注册的调用接口
wx.config({
debug: false,
appId: 'xxxx',
timestamp: 'xxxx',
nonceStr: 'xxxx',
signature: 'xxxx',
jsApiList: [
'chooseImage',
'getLocalImgData',//插播一段提示，1.2版本以下被弃用了的、而且在微信工具是检测不了注册的，谨记！
]
});

三、直接开撸代码贴提示（vue中的开发环境）
const self=this;
wx.chooseImage({
count: 1, // 默认9 // 选择图片数量，选项采用只能选择1张图片
sizeType: ['compressed'], // 可以指定是原图还是压缩图，选项采用压缩图
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (req) {
wx.getLocalImgData({
localId: req.localIds[0].toString(), // 图片的localID为第1个
success: function (res) {
const localData = res.localData;
// localData是图片的base64数据，可以用img标签显示
//因为安卓、苹果的处理方式不同（我们不一样！），在此做了些特殊的处理！
if(localData.indexOf('data:image') == 0){ //判断转换中是否带'data:image'
//苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接
self.image=localData;
}else{
//此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换
//感兴趣的可以自行console或代理调试看看~老司机都懂~
//此时一个正常的base64图片路径就完美生成赋值到img的src中了
self.image="data:image/jpeg;base64,"+localData.replace(/\n/g,"");
}
}
});
}
});

转载于:https://juejin.im/post/5b28fa54e51d4558e3600801