微信开发 关于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+"&timestamp="+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