微信头像的灵活使用

如果做微信相关的开发,可能免不了要使用到取用户的头像。微信提供的多种取头像的方式,如下链接,是微信用户头像的原始链接;http://wx.qlogo.cn/mmopen/XYrRG5UShDeR5pkoC4ib0YibSSXr0bmqLAJhNdItlYAf6DNRKqk6AFMUn6OMPbE6qqYNP03n9saQbHdtXgByHsMQ/0。

但是这个头像占用空间比较大,有24KB,如果在列表中大量使用,会大大的增加页面加载资源的大小,影响用户的加载的速度。在列表中,其实没必要用那么大的图片,

即使在页面中显示时,也会进行宽高比的压缩。微信还提供另外几种不同大小的头像的获取方式。

用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表640*640正方形头像),用户没有头像时该项为空。若用户更换头像,

原有头像URL将失效。

1. .rankMenu img的头像全部都是微信的头像,先不加载原始头像,把img的src修改为随便设置一个属性,本例是修改为isrc。然后,将该头像的src赋值为isrc的值,并且将/0修改为你想要的格式。

<div class="headimg">

<img isrc="<%=self.getHeadimgurl()%>" />
</div>

$(".rankMenu img").attr(‘src‘, function(){

return $(this).attr(‘isrc‘).replace(/\/0$/, ‘/46‘);
});
2.headimg img的头像,既有微信的头像,又有其他非微信的头像,需要先做一下判断,作为区分。
if(($(".headimg img").attr("isrc")).indexOf("http://wx.qlogo.cn")==0){
$(".headimg img").attr(‘src‘, function(){
return $(this).attr(‘isrc‘).replace(/\/0$/, ‘/64‘);
});
}else{
$(".headimg img").attr(‘src‘, function(){
return $(this).attr(‘isrc‘);
});
}

时间: 2024-10-05 04:19:12

微信头像的灵活使用的相关文章

Android高仿微信头像裁剪

最近公司的APP很多用户反应无法上传头像,于是打算修改原来头像裁剪的代码.参考微信.QQ.唱吧头像裁剪的操作,决定就仿微信头像裁剪来上传用户头像,在Android大神鸿洋的一篇高仿微信头像的博客(博客地址结尾会贴出来)的基础上加了一些代码,加的代码主要增加如下的功能: 1.增加对大图的处理,缩放到我们裁剪框的大小. 2.裁剪后的图片保存到临时文件里,把临时文件的路径返回到需要处理的界面,因为在三星S4传byte数组返回数据时会闪退,传路径则正常. 3.对有些系统返回旋转过的图片进行处理. 这个功

Android 高仿微信头像截取 打造不一样的自定义控件

转载请表明出处:http://blog.csdn.net/lmj623565791/article/details/39761281,本文出自:[张鸿洋的博客] 1.概述 前面已经写了关于检测手势识别的文章,如果不了解可以参考:Android 手势检测实战 打造支持缩放平移的图片预览效果(下).首先本篇文章,将对之前博客的ZoomImageView代码进行些许的修改与改善,然后用到我们的本篇博客中去,实现仿微信的头像截取功能,当然了,个人觉得微信的截取头像功能貌似做得不太好,本篇博客准备去其糟粕

iOS 裁剪圆形图像并显示(类似于微信头像)

本文主要讲解如何从照片库选择一张照片后将其裁剪成圆形头像并显示,类似于微信头像那种模式. 本文的方法也适用于当时拍照获取的图像,方法类似,所以不再赘述. 本文主要是在iOS 10环境下使用,此时如果要使用使用系统照片库.照相机等功能需要授权,授权方法如下: 右键点击工程目录中的"Info.plist文件-->Open As -->Source Code",打开复制以下你在应用中使用的隐私权限设置(描述自己修改): <key>NSVideoSubscriberAc

Android 高仿微信头像截取 打造不一样的自己定义控件

转载请表明出处:http://blog.csdn.net/lmj623565791/article/details/39761281,本文出自:[张鸿洋的博客] 1.概述 前面已经写了关于检測手势识别的文章.假设不了解能够參考:Android 手势检測实战 打造支持缩放平移的图片预览效果(下).首先本篇文章,将对之前博客的ZoomImageView代码进行些许的改动与改善,然后用到我们的本篇博客中去,实现仿微信的头像截取功能.当然了.个人觉得微信的截取头像功能貌似做得不太好.本篇博客准备去其糟粕

canvas跨域完美解决,微信头像解决跨域

现在前端技术发展的越来越快,很多图片合成这种耗费服务器性能的,都可以移动到前端进行了合成了.而且合成很方便,我们利用 canvas 可以实现好多东西. 自动打算利用前端来合成图片,在网上就找到了 html2canvas,大家可以试试,很简单. 前端 canvas 经常会遇到 『图片跨域』 的问题. 项目中,最典型的例子是: 将微信头像,通过 canvas 来合成图片 之前的做法一直是,将微信头像保存下来,可以存储到目录,和用户 id 相关的命名.我是直接获取图片的 base64 存储到了数据库,

麒麟子Cocos Creator实用技巧一:如何正确地显示微信头像

不管是游戏App,还是H5,又或者是微信小游戏.但凡接入了微信登录的应用,都可能需要显示微信头像. 在Cocos Creator中,我们常见的显示方法像下面这样 var headimg = 'http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83erD6MOUwRKV9NyBAqnoFDTnltzAe2zWOkKxyDOFibVBb1ZV5CaATJwYAuNqZ5sXMBC4c8iacaHDf8RA/132'; cc.loader.load({url:he

微信头像地址失效踩坑记附带方案

微信头像失效问题说明? 最近工作遇到一个微信头像失效的问题,情况是这样的,我们一个h5页面在微信授权后打开,会存储微信相关昵称和头像信息,不过,我们没有保存图片到自己的服务器,而是仅仅存储微信头像地址,然而过了n多天后,用户在微信修改了自己的头像,这时候,我们的服务是无感知的,又过了n多天,用户去访问我们那个h5页面,发现自己的头像是这样的: 用户找到我们,说自己有头像呀,怎么没显示呢? 我们也反问他,是否最近改过头像呢,他说没,不过很早之前改过. 而此时就比较尴尬,用户体验超级不好. 然后我们

给我一面国旗@微信官方什么梗 怎么给微信头像戴上国旗

最近很多小伙伴发现朋友们的都在发给我一面国旗@微信官方,而且微信头像上也有国旗了,给我一面国旗@微信官方什么梗,怎么给微信头像戴上国旗,西西小编来为大家介绍. [文章结尾有教程,扫码即得小国旗] 微信头像国旗怎么弄 给我一面国旗@微信官方,发了是不能给微信头像戴上国旗的,用户需要前往腾讯新闻小助手,找到迎国庆换新颜. 点击进去之后,有下面这些头像可以选. 因此,其实压根不用发朋友圈艾特微信官方 ,直接进入这个小程序就可以了,事实上,有很多这样的小程序可以实现这个功能. 发朋友圈这一步,这其实算是

解决使用canvas生成含有微信头像的邀请海报没有微信头像

最近做了一个微信内访问的H5页面,长按分享图片发送朋友邀请的海报,网上搜索资料,得出解决思路,用canvas将页面绘制生成图片, 问题:canvas 图片跨域. 解决过程(填坑历程): 1.从网上存在如图解决办法     img.crossOrigin  = ""   (专业采坑,数年).亲测无效.很是不解. 2.网上也存在后端服务解决 设置header头,或者nginx 服务配置等 允许访问.但是,存在问题(图片大部分为了优化,都会存放在第三方cdn.上面.这是第三方的配置,是否允许