vue 图片放大、缩小、旋转、滚轮操作图片放大缩小

组件

<template><!--  --><div class="imgCont"ref="imgCont"@mousewheel.prevent="rollImg($event)"><div class="iconBtn"><span class="refreshBtn"><i class="el-icon-zoom-out"@click.stop="outImg('out')"></i><i class="el-icon-zoom-in"@click.stop="outImg('in')"></i><i class="el-image-viewer__actions__divider"></i><i :class="mode.icon" @click="toggleMode"></i><i class="el-image-viewer__actions__divider"></i><i @click.stop="rotate('left')"class="el-icon-refresh-left"></i><i @click.stop="rotate('right')"class="el-icon-refresh-right right"></i><slot name="addIcon"></slot></span></div><img class="bigImage"ref="imgDiv"@mousedown.stop.prevent="moveImg($event)"id="img":src="url" /></div>
</template><script>
const Mode = {CONTAIN: {name: "contain",icon: "el-icon-full-screen"},ORIGINAL: {name: "original",icon: "el-icon-c-scale-to-original"}
};
export default {name: 'imgDeal',props: {url: {},},components: {},data () {return {mode: Mode.CONTAIN,// 图片参数params: {zoomVal: 1,left: 0,top: 0,currentX: 0,currentY: 0,},deg: 0,};},computed: {},watch: {},created () {this.restImg();},mounted () {},methods: {//1:1自适应toggleMode () {const modeNames = Object.keys(Mode);const modeValues = Object.values(Mode);const index = modeValues.indexOf(this.mode);const nextIndex = (index + 1) % modeNames.length;this.mode = Mode[modeNames[nextIndex]];if (this.mode.name == 'original') {this.originalFunc();} else {this.restImg();}},// mode==original 默认放大图片originalFunc () {this.params.zoomVal = 2;this.restFunc();},// 初始化数据,重置数据restImg () {this.params.zoomVal = 1;this.restFunc();this.mode = Mode['CONTAIN'];},restFunc () {this.params.left = 0;this.params.top = 0;this.params.currentX = 0;this.params.currentY = 0;this.deg = 0;if (this.$refs.imgDiv) {let img = this.$refs.imgDiv;img.style.transform = `translate(-50%, -50%) scale(${this.params.zoomVal}) rotate(${this.deg}deg)`;img.style.left = '50%';img.style.top = '50%';}},// 图片滚动放大rollImg (event) {this.params.zoomVal += event.wheelDelta / 1200;this.rollFunc()},outImg (flag) {if (flag == 'out') {this.params.zoomVal -= 0.2;} else {this.params.zoomVal += 0.2;}this.rollFunc()},rollFunc () {let e = this.$refs.imgDiv;if (this.params.zoomVal >= 0.2) {e.style.transform = `translate(-50%, -50%) scale(${this.params.zoomVal}) rotate(${this.deg}deg)`;} else {this.params.zoomVal = 0.2;e.style.transform = `translate(-50%, -50%) scale(${this.params.zoomVal}) rotate(${this.deg}deg)`;return false;}},// 图片旋转rotate (type) {let res = this.$refs.imgDiv;this.deg = type == 'right' ? this.deg + 90 : this.deg - 90res.style.transform = `translate(-50%, -50%) scale(${this.params.zoomVal}) rotate(${this.deg}deg)`},// 图片移动moveImg (e) {// 获得该时间触发的时间戳let mouseDate = new Date().getTime();this.$emit('getMouseDate',mouseDate)e.preventDefault()// 获取元素let imgWrap = this.$refs.imgContlet img = this.$refs.imgDivlet x = e.pageX - img.offsetLeftlet y = e.pageY - img.offsetTop// 添加鼠标移动事件imgWrap.addEventListener('mousemove', move)function move (e) {img.style.left = e.pageX - x + 'px'img.style.top = e.pageY - y + 'px'}// 添加鼠标抬起事件，鼠标抬起，将事件移除img.addEventListener('mouseup', () => {imgWrap.removeEventListener('mousemove', move)})// 鼠标离开父级元素，把事件移除imgWrap.addEventListener('mouseout', () => {imgWrap.removeEventListener('mousemove', move)})},},
};
</script><style scoped lang="scss">
.imgCont {text-align: center;vertical-align: middle;position: relative;overflow: hidden;width: 100%;height: 100%;.iconBtn {position: absolute;left: 0;bottom: 0;height: 35px;line-height: 35px;background-color: rgba(0, 0, 0, 0.2);color: #fff;width: 100%;z-index: 100;font-size: 20px;.refreshBtn {i {cursor: pointer;margin: 0 10px;}}}.bigImage {max-width: 100%;max-height: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);cursor: move;margin: 0 auto;}
}
</style>

组件使用

import ImgDeal from "@/components/imgDeal.vue";
components: {ImgDeal },

<ImgDeal ref="imgDeal" :url="imgUrl"></ImgDeal>

vue 图片放大、缩小、旋转、滚轮操作图片放大缩小相关推荐

ps如何修改图片大小尺寸_PS常用操作 | 图片的裁剪、拼接、尺寸调整... ...
2020/ 04/24 你是不是也经常会遇到想要的内容位于前后页无法截在一张图上,横图改为竖图无从下手,上传图片大小超限,一张图片想改成九宫格不会操作等等烦恼,今天我们就来看看这些问题如何用PS来解决 ...
css实现图片的3d旋转-照片墙
一.效果图二.图片摆放 1.html 这里准备了1个section和7个div,7个div都要求定位在父元素section那里(都在中心点),每个div各一张图,上面效果图有1张在中间的,其余6张图 ...
前端实现图片查看器（滚轮放大，缩小，旋转）——Viewer.js
一.前端实现图片查看器(放大,缩小,旋转)--Viewer.js [附参考链接:(14条消息) Viewer.js第一次点击图片无法显示解决方案(vue使用)_李墨瞳的博客-CSDN博客] 1.0 J ...
微信小程序操作图片放大、缩小、旋转、拖拽
微信小程序操作图片放大.缩小.旋转.拖拽在开发小程序的时候遇到了上传图片,然后编辑的需求.打算网上找一下相关代码组件的,就不用自己搞这么麻烦.经过一番折腾,还是没有找到如意的,最后自己弄好了,记录一 ...
jQuery仿QQ空间图片查看特效（全屏，放大，缩小，旋转，镜像，鼠标滚轮缩放）
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 地址:h ...
v-viewer预览图的使用（图片预览旋转/放大缩小/上下切换等）
前言: 之前项目需求,需要找一个预览图的组件,最开始,找了vue-preview组件.因为vue-preview是直接引入 < vue-preview>这个标签,无法看到对组件里面的图片i ...
图片放大缩小旋转左移右移镜像倒影android
图片放大缩小旋转左移右移镜像倒影 demo: TestImage 1. 将 meinv.jpg 图片拷贝到以下目录TestImage\app\src\main\res\mipmap-hdpi 1.An ...
鼠标滚轮控制图片的放大和缩小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
图片放大、缩小、恢复操作的实现
无论怎样实现图片的显示操作,基本上都是将图片显示在类似于Canvas控件中.图片的放大.缩小和恢复操作就是通过计算图片的显示大小比例来实现图片的放大缩小和恢复功能. 在下面提供图片的比例的计算类,其中 ...

vue 图片放大、缩小、旋转、滚轮操作图片放大缩小

vue 图片放大、缩小、旋转、滚轮操作图片放大缩小相关推荐

最新文章

热门文章