微信开发 关于wx.getLocalImgData那点事儿 已解决!

来源:互联网 发布:海岛奇兵升级数据最新 编辑:程序博客网 时间:2024/06/05 22:56

最近公司开发微信公众平台,用到了微信的选择图片以及图片选择完成后再手机里预览的问题,一开始在安卓手机的时候很顺利,一直开发完成。挺高兴的,可是当我拿同事的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 目前完美解决!!!
原创粉丝点击