照片放大功能h5
这里就不放图了,放大的是别人的身份证
<template>
<div class="image-cell__wrapper" :style="border">
<span class="title" :style="{color: titleColor}">{{ imageTitle }}</span>
<span class="icon-image"></span>
<span class="image-wrapper">
<img v-for="(item, key) in realImage" :src="imageHandle(item, 80, 80)" alt="image">
</span>
<span class="icon-arrow" v-if="arrow"></span>
<div v-if="inlineBorder"
class="inline-border"></div>
</div>
</template>
<script>
import { imgHandle } from '@/utils/tool'
export default {
name: 'imageCell',
props: {
imageTitle: {
type: String,
required: true
},
image: {
required: false
},
arrow: {
type: Boolean,
default: true
},
titleColor: {
type: String,
default: '#575fb6'
},
inlineBorder: {
type: Boolean,
default: false
},
hasBorder: {
type: Boolean,
default: false
}
},
data () {
return {
border: {
borderBottom: this.hasBorder ? '1px solid #ececec' : ''
}
}
},
created () {
},
computed: {
realImage () {
if (this.image) {
return this.image.length > 5 ? this.image.slice(0, 5) : this.image
}
}
},
methods: {
imageHandle (url, w, h) {
return imgHandle(url, w, h)
}
}
}
</script>
<style lang="stylus" scoped>
@import "~@/assets/mixin.stylus"
.image-cell__wrapper{
position relative
width 9rem
padding 0 .5rem
height 1.5rem
line-height 1.5rem
background-color white
font-dpr(16px)
color #4A4A4A
.title{
color #575fb6
}
.icon-image{
display inline-block
width .5rem
height .4rem
bg-image('./img/picture')
background-size contain
vertical-align middle
}
.image-wrapper{
display inline-block
position absolute
right 1rem
img{
display inline-block
vertical-align middle
padding-left .3rem
width .6rem
height .6rem
}
}
.icon-arrow{
position relative
top .6rem
float right
display inline-block
width .2rem
height .4rem
bg-image('~@/assets/img/arrow')
background-size contain
}
.inline-border{
position absolute
bottom 0
left .4rem
width 9.6rem
height 1px
background-color #ECECEC
}
}
</style>
tool.js里面的imgHandle
@function imgHandle 切割图片
function imgHandle (url, width, height) {
const fontSize = document.documentElement.style.fontSize.split('px')[0]
return url + '?imageView2/1/w/' + (fontSize / 75 * width * 5).toFixed(0) + '/h/' + (fontSize / 75 * height * 5).toFixed(0) + '/q/100'
}
export { imgHandle }
export default { imgHandle }
照片放大功能h5的更多相关文章
- 图片放大功能插件及jquery.extend函数理解
前端时间,产品提出社区评论中的图片需要有放大功能.感觉可以共用,所以就想整合一个插件,过程中也借鉴了一些例子. 分析下自己的代码思路: var scaleImg = function(opts) { ...
- jQuery.YesShow - 图片轮播插件(带图片放大功能)
jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes"> <ul> ...
- 刑天DDOS攻击器下一版本即将使用NTP放大功能
刑天DDOS攻击器下一版本即将使用NTP放大功能 在一次无语实验中无意发现NTP方法后的攻击流量相当可观,Linux实测G口高达30G,也就是说最大可以放大30倍的攻击流量是何等的威武.而 ...
- 图片放大功能如何做?jquery实现
花了很长时间撸了个网站,观点,其中需要一个图片放大功能,网上找了半天发现都没有中意的,最后无奈之下自己写了一个,演示地址,演示图片: 自我感觉效果还不错,现在分享开来给大家看看,哪里不好还请多多指教, ...
- jqzoom插件图片放大功能的一些BUG
建议使用cloud-zoom插件,jqzoom插件就不要使用了 点击查看——图片放大镜——jQuery插件Cloud Zoom 刚开始使用的是jqzoom插件,但问题太多了,就不说插入到页面中使用了, ...
- JS-以鼠标位置为中心的滑轮放大功能demo1
以鼠标位置为中心的滑轮放大功能demo1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...
- css3通过scale()实现放大功能、通过rotate()实现旋转功能
css3通过scale()实现放大功能.通过rotate()实现旋转功能,下面有个示例,大家可以参考下 通过scale()实现放大功能 通过rotate()实现旋转功能 而transition则可设置 ...
- Typora配置双击图片放大功能
在Typora中,默认没有点击图片放大功能,本文就教大家如何配置该功能. 我的环境版本 Typora版本:0.11.13 LightBox版本:2.11.3 下载LightBox 可以从Github下 ...
- 照片放大软件PhotoZoom怎么用?
做设计时,难免常常要上网找一些图片素材,但是有时候我们找到图片效果不尽人意,图片风格符合设计要求的的却图片太小,用photoshop放大后,图片的色块像素就出来了,效果极为不理想,这就要我们将图片进行 ...
随机推荐
- python 跨目录访问文件
1.同级.同目录的文件之间的访问 有这样一个目录结构 假如,in_A.py 这个文件想调用 hello_world.py 中的函数怎么办呢? --->>> import 只需在 i ...
- python错误日志记录工具,解决项目排错问题
我们写项目的时候难免会遇到代码报错的问题,遇到这样的问题了如何快速的定位问题并解决问题呢? 我今天来整理了利用python只带的工具来解决这个问题,我能需要使用的库有: logging os 这些都是 ...
- java-Java实现mysql事务处理操作
数据库事务(简称:事务)是数据库管理系统执行过程中的一个逻辑单位,由一个有限的数据库操作序列构成. 并非任意的对数据库的操作序列都是数据库事务.数据库事务拥有以下四个特性,习惯上被称之为ACID特性. ...
- requests中构造post请求注意点
构造post请求时需要注意点: 通过requests.post()进行POST请求时,传入报文的参数有两个,一个是data,一个是json. 如果是urlencoded 格式 data=字典如果是js ...
- linux档案和目录管理(后续)
资料来自鸟哥的linux私房菜 四:档案和目录的预设权限和隐藏权限 umask:预设权限,相比与chomd的4,2,1权限,档案满分为666,目录满分为777,umask可以预设消除部分权限,比如一个 ...
- LINUX下查看日志信息
Linux下grep显示多行信息标准unix/linux下的grep通过以下参数控制上下文 grep -C 5 foo file 显示file文件中匹配foo字串那行以及上下5行 例如 grep -C ...
- 数据库迁移Flyway
为什么需要Flyway 日常开发常常会遇到一些这样的场景 小红开发一个模块在本地数据库增加了两个字段,并且改动了dao层的代码提交到git.这时候小黄拉取了代码Run很可能报错. 如果在上线正式环境的 ...
- 实验八 《Coderxiaoban团队》团队作业4:基于原型的团队项目需求调研与分析
实验八 <Coderxiaoban团队>团队作业4:基于原型的团队项目需求调研与分析 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 实验八 团队作业4:基于 ...
- 实用的Python库
一.Django 1.自动实现图片压缩: pip install easy-thumbnails / https://pypi.org/project/easy-thumbnails/2.实现定时任务 ...
- Dubbo源码分析:Exchanger
实现此接口获取Server服务. 实现的类只有HeaderExchanger类. 方法 时序图