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

最新推荐文章于 2023-03-01 15:38:00 发布

wangmj518

最新推荐文章于 2023-03-01 15:38:00 发布

阅读量1.9k

点赞数 1

分类专栏：微信 think php

think php 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

微信

9 篇文章 0 订阅

订阅专栏

最近公司开发微信公众平台，用到了微信的选择图片以及图片选择完成后再手机里预览的问题，一开始在安卓手机的时候很顺利，一直开发完成。挺高兴的，可是当我拿同事的iOS一看的时候，尼玛啊，图片是能选，可是预览不了啊，是空白的！！！！是空白的！！！！是空白的！！！！

后来我一看api 还有一个接口 wx.getLocalImgData 那么问题来了接口是有可是怎么使用呢捣鼓了半天期间也遇到各种问题，功夫不负有心，在我加班到晚上9点多的时候终于搞出来了哈哈哈废话不多说上代码

首先微信的js文件是必须要引的

//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
版权声明：本文为博主原创文章，转载请附上博文链接！

wangmj518

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信开发关于wx.getLocalImgData那点事儿已解决！

最近公司开发微信公众平台，用到了微信的选择图片以及图片选择完成后再手机里预览的问题，一开始在安卓手机的时候很顺利，一直开发完成。挺高兴的，可是当我拿同事的iOS一看的时候，尼玛啊，图片是能选，可是预览不了啊，是空白的！！！！是空白的！！！！是空白的！！！！后来我一看api 还有一个接口wx.getLocalImgData 那么问题来了接口是有可是怎么使用呢捣鼓了半天期间也遇到各种...
复制链接

扫一扫