vue头像加白边_Vue头像处理方案小结
个人思路
获取后台返回头像url,判断图片宽度,高度。
如果宽度>高度, 使其高度填充盒子 两边留白。
如果宽度
效果图:
缺陷:懒加载图片 会出现闪烁
代码实现
// 外面要给一个div并且限制宽度和高度,text-align center,overflow hidden
// userInfoList.avatar 是后台返回给我的头像URL
import { head, heads } from '@/assets/js/base' // 存放head,heads目录引入
export default {
data(){
return {
listQuery:{
pg: 1,
ps: 10
}
},
methods:{
//获取用户详情
getUserInfoList(){
getlist('mobile/user/pers/detail', funciton(res) {
if(data.code == ERR_OK){
_this.userInfoList = res.data
// 单个头像处理,$nextTick处理去报 数据加载完成后 在进行图
_this.$nextTick(function () {
head(res.data.avatar, 'userhead')
})
// 下拉加载多个头像处理
res.data.item.forEach((item, index) => {
if(_this.listQuery.pg>1){ // 下拉加载时,头像依然要进行处理
let count = (10*(_this.listQuery.pg -1) + index)
_this.$nextTick(function () {
heads(item.adatar, count, 'headitem')
})
}else{
_this.$nextTick(function () {
heads(item.adatar, index, 'headitem')
})
}
}
_this.listQuery.pg++
}
})
}
assets文件js下的base.js
// 单个头像处理
export function head (objUrl, id) {
let _userhead = document.getElementById(id)
if(_userhead){
if(objUrl){
let img = new Image()
img.src = objUrl
img.onload = function () {
let _width = img.width
let _height = img.height
if(_width >= _height){
_userhead.style.width = '100%'
}else{
_userhead.style.height = '100%'
}
}
}else{
_userhead.style.width = '100%'
}
}
}
// 多个头像处理
export function heads (objUrl, index, className) {
let _heads = document.getElementsByClassName(className)[index]
if(_heads){
if(objUrl){
let img = new Image()
img.src = objUrl
img.onload = function () {
let _width = img.width
let _height = img.height
if(_width >= _height){
_heads.style.width = '100%'
}else{
_heads.style.height = '100%'
}
}
}else{
_heads.style.width = '100%'
}
}
}
总结
以上所述是小编给大家介绍的Vue头像处理方案小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
vue头像加白边_Vue头像处理方案小结相关推荐
- vue 移动端头像裁剪_Vue 头像裁剪控件
使用 基于canvas撸的一个 Vue头像裁剪控件 PC端,鼠标左键移动.滚轮缩放.右键旋转 移动端,单指移动,双指移动.缩放.旋转 属性 backBoxSize 背景方格大小 默认值:10 back ...
- vue 移动端头像裁剪_vue头像上传裁剪组件_一个漂亮的Vue组件,用于图像裁剪和上传...
vue头像上传裁剪组件 vue-image-crop-upload (vue-image-crop-upload) A beautiful vue component for image crop a ...
- 基于 springboot + vue 的 element-ui 的 upload 组件头像上传功能
基于 springboot + vue 的 element-ui 的 upload 组件头像上传 为了方便我们自己本地测试使用,我们将文件上传至自己电脑的磁盘中,由于项目是前后端分离的,所以我们会直接 ...
- python头像右上角加红色数字_利用python实现微信头像加红色数字功能
通过Python实现将你的 QQ 头像(或者微博头像)右上角加上红色的数字,类似于微信未读信息数量那种提示效果. 类似于图中效果 实现过程: 准备两张图片如下: 使用PIL图像处理库,导入moudle ...
- 不用P图!用Python给头像加圣诞帽并制作成可执行软件!
文 | 闲欢 来源:Python 技术「ID: pythonall」 随着圣诞节的到来,节日气氛也越来越浓厚.大街上随处可见挂满饰品的圣诞树,好多小伙伴的头上也多了一顶红色牛角的圣诞帽. 往年在这个时 ...
- PHP之微信头像加水印
微信头像加水印-PHP实现 需求描述 代码 微信默认头像不是高清头像的解决办法 需求描述 公众号小程序用户引流, 微信头像上面加 "武汉加油"水印图片, 用户通过微信分享的方式吸引 ...
- 【游戏开发创新】520程序员的浪漫,给CSDN近两万的粉丝比心心(python爬虫 | Unity循环复用列表 | 头像加载与缓存)
文章目录 一.前言 二.最终效果 三.读取CSDN粉丝列表数据 1.分析粉丝列表页面结构 2.爬数据 四.Unity制作 1.文件读取 2.c#解析json 3.UGUI循环复用列表 4.头像的加载 ...
- python程序设置头像_利用python实现微信头像加红色数字功能
通过Python实现将你的 QQ 头像(或者微博头像)右上角加上红色的数字,类似于微信未读信息数量那种提示效果. 类似于图中效果 实现过程: 准备两张图片如下: 使用PIL图像处理库,导入moudle ...
- 用python给头像加圣诞帽
首页 算法 社区 帮助 登录 注册 首页 帮助 常见问题 算法管理 算法上传 开发与部署规范 C/C++ Python git管理 算法审核规则 项目说明 个人中心 关于极市 隐私策略 社区 文章详情 ...
最新文章
- 科略教育——执行力的3W管理法
- module 'paddle.fluid' has no attribute 'data'
- Hadoop详解(一):Hadoop简介
- [原]ubuntu14.04 网卡逻辑修改没有文件/etc/udev/rules.d/70-persistent-net.rules
- python IP地址无效化
- oracle 换行符_python实现自动化报表(Oracle/plsql/Excel/多线程)
- Python 3.10 正式发布,新增模式匹配,同事用了直呼真香
- 标题排版字幕动画fcpx模板:Typography Titles for Mac
- 苹果发布iOS 13.1.1更新 修复第三方键盘APP安全等问题
- HibernateTemplate使用方法
- hadoop工作流引擎azkaban
- 2021-02-24 PMP 群内练习题 - 光环
- html ul4032,国标UL认证安规标准UL1059接线端子及附件.pdf
- android学习笔记----多线程断点续传下载原理设计
- 【综述笔记】一些弱监督语义分割论文
- 《Question Answering on Freebase via Relation Extraction and Textual Evidence》
- 一段让你虎躯一震的代码
- 如何理解反步法设计控制器?
- MySQL 部门员工工资表 综合练习
- 怎样完成MES系统实施?