微信开发 关于wx.getLocalImgData那点事儿 已解决！
最近公司开发微信公众平台，用到了微信的选择图片以及图片选择完成后再手机里预览的问题，一开始在安卓手机的时候很顺利，一直开发完成。挺高兴的，可是当我拿同事的iOS一看的时候，尼玛啊，图片是能选，可是预览不了啊 ，是空白的！！！！是空白的！！！！是空白的！！！！
后来我一看api 还有一个接口 wx.getLocalImgData 那么问题来了接口是有 可是怎么使用呢 捣鼓了半天 期间也遇到各种问题，功夫不负有心，在我加班到晚上9点多的时候 终于搞出来了 哈哈哈 废话不多说 上代码
首先 微信的js文件是必须要引的
<script src="${path}/static/aui/myscript/sha1.js"></script>//用于微信的签名算法
http://res.wx.qq.com/open/js/jweixin-1.2.0.js
其次是配置调用微信的接口 这个就不必多说了 从后台取jssdk 然后前台执行加密算法，微信开发文档里都有
$.ajax({
type : "GET",
url : url+"/wx/web/main/getticket",//后台接口取微信的临时门票
dataType : 'json',
async: false,
contentType : "application/json",
data : ticketprams,
success :
function(ro) {
if(ro.code == 200){
console.log(ro)
appid=ro.datas.appid; //公众号的appid
jsapi_ticket = ro.datas.jsapi_ticket; //后台返回的jsapi_ticket
} },
error : function(err) {
alert(err.message); } });
//随机字符串 var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
function generateMixed(n) { var res = ""; for(var i = 0; i < n ; i ++) { var id = Math.ceil(Math.random()*35); res += chars[id]; } return res; }; var noncestr=generateMixed(17); //生成签名
var shastring="jsapi_ticket="+jsapi_ticket+"&noncestr="+noncestr+"×tamp="+nowtime+"&url="+window.location.href; //注意 //window.location.href 不能包含#号
//alert(shastring);var signa=hex_sha1(shastring);//算签名
wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: appid, // 必填，公众号的唯一标识
timestamp: nowtime, // 必填，生成签名的时间戳
nonceStr: noncestr, // 必填，生成签名的随机串
signature: signa,// 必填，签名，见附录1
jsApiList : [ 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'chooseWXPay', 'getLocalImgData' ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
}); })
好了 前期准备工作 到此为止 开始正题
var images = { localId: [],//微信返回的本地id列表
serverId: [],//微信返回的服务器id列表 };
ioslocId=[];//用于兼容ios的本地id列表 图片是base64格式的
$("#add").on('click',function () { //点击加号的时候执行下面函数
var imglen=images.localId.length;//计算 本地id列表的长度
wx.chooseImage({ count: 8-imglen, // 默认9 计算还可以选择几张图片 我这默认是8
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
$("#photolist").html("");//每次选择图片完成后都清空之前已经添加的html节点
rows="";//声明一个空字符串用于保存循环出来的html
images.localId =images.localId.concat(res.localIds); // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
if (window.__wxjs_is_wkwebview) { //判断ios是不是用的 wkwebview 内核
for(var i=0;i<images.localId.length;i++){
wx.getLocalImgData({ //循环调用 getLocalImgData localId:res.localIds[i], // 图片的localID success: function (res) {
var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
localData = localData.replace('jgp', 'jpeg');//iOS 系统里面得到的数据，类型为 image/jgp,因此需要替换一下
ioslocId.push(localData) //把base64格式的图片添加到ioslocId数组里 这样该数组里的元素都是base64格式的
rows="";
for(var j=0;j<ioslocId.length;j++){
rows+=`<div class="z_file" style="background-image: url(`+ioslocId[j]+`)"><div class="delete" data-id="`+j+`"></div></div>` }
$("#photolist").html(rows); },fail:function(res){ alert("res"); } }); } alert(rows) }
else{ //如果不是用的wkwebview 内核 或者是用的安卓系统 执行下面的xunh $.each(images.localId,function (index,el) { rows+=`<div class="z_file" style="background-image: url(`+el+`)"> <div class="delete" data-id="`+index+`"></div> </div>` }); $("#photolist").html(rows); } uploadimg();
//上传图片的方法 官方dome都有 我就不在赘述。 } }); }); });
ok 目前完美解决！！！
---------------------------------------------------------------
以下是2017年12月25日更新：
有的朋友开发是用到vue来开发 请注意当你用vue时候 会有个大坑。用上面的方法就是ios里面
选择一张图片的时候是没有问题的 当你选择多张的时候 你发现 上面的方法不好用了。用vue 实现就的换一种思路了
如下是解决后的截图
大致思路 还是一样的 就是换了一种执行办法。 选多张的时候 你也让他按一张来
当前一个getLocalImgData完成后 在执行一遍getLocalImgData 只是第二次执行的时候
里面的loacid 变成第二个了 这是递归么。。。。
如果 你这样写完之后发现base64 的url 都是正常的 但是还是没有显示图图片的话 那可能是v-for 的问题 不要用v-for循环 它可能没有重新渲染页面 要用show来解决
欢迎加qq骚扰:710988935
---------------------
作者：冥界摄政王
来源：CSDN
原文：https://blog.csdn.net/jinyuyang78/article/details/76168649
版权声明：本文为博主原创文章，转载请附上博文链接！