vue 实现图片查看器（仿windows图片查看器）

自己vue项目中用到的一个类似于windows照片查看器的功能不使用插件
这里的核心代码是从插件中扒下来的因为插件有点不符合我自己的使用要求这里记录一下

//因为我这里是vue项目 图片查看是一个单独的组件 所以我把图片在组件中的移动写成了一个指令 指令代码也是插件里扒出来的哈
//如果需要全屏或者双击全屏的时候 vm.setImageSize(vm.img); 加上这句代码在操作之后
Vue.directive('dragz',function(el,binding,vnode){//图片放大移动的指令let oDiv = el;let isDragging = false;let startX = 0,startY = 0,left = 0,top = 0,widthDiff = 0,heightDiff = 0,δ = 0;//计算出盒子的大小和图片的大小oDiv.onmousedown = function(e){e.preventDefault();let imageWidth = el.clientWidth;let imageHeight = el.clientHeight;let stageWidth = el.parentNode.clientWidth;let stageHeight = el.parentNode.clientHeight;startX = e.type === 'mousedown' ? e.pageX : e.clientX;startY = e.type === 'mousedown' ? e.pageY : e.clientY;// δ是图像宽度和高度之间的差异δ = 0;widthDiff = imageWidth - stageWidth;heightDiff = imageHeight - stageHeight;isDragging = widthDiff > 0 || heightDiff > 0;left = oDiv.offsetLeft - δ;top = oDiv.offsetTop + δ;document.onmousemove = function(e){let endX =e.type === 'mousemove' ? e.pageX : e.clientX,endY = e.type === 'mousemove' ? e.pageY : e.clientY,relativeX = endX - startX,relativeY = endY - startY,newLeft = relativeX + left,newTop = relativeY + top;//垂直限制if(heightDiff > 0){if(relativeY + top > δ){newTop = δ;}else if(relativeY + top < -heightDiff + δ){newTop = -heightDiff + δ;}}else{newTop = top;}//水平限制if(widthDiff > 0){if(relativeX + left > -δ){newLeft = -δ;}else if(relativeX + left < -widthDiff - δ){newLeft = -widthDiff - δ;}}else{newLeft = left;}oDiv.style.left = newLeft + 'px';oDiv.style.top = newTop + 'px';binding.value({left:newLeft,top:newTop});};document.onmouseup = function(e){document.onmousemove = null;document.onmouseup = null;isDragging = false;};};
});//下面是使用 这里的上一层记得用相对定位<div class="item_pic" :id="'item_pic'+'独特id'" v-show="imgLoading"><img :src="自己填写" alt="" style="height:100%" v-dragz="greet"@mousewheel="imgToSize($event)" :id="'newImage'+'独特id'"@mousedown="mouseDowns" @mouseup="mouseUps"></div>//注意下这里的css.item_pic{position:absolute;top:0;right:0;bottom:0;left:0;img{position:absolute;}}mounted() {let vm = this;//这里a是url 就是图片的地址 能查看的地址vm.preloadImg(a,function(){let img = new Image();img.src = a;vm.img = img;vm.imageData = {originalWidth:img.width,originalHeight:img.height};vm.$image = $('#newImage' + '独特id');vm.$stage = $('#item_pic' + '独特id');vm.setImageSize(img);vm.imgLoading = true;});}
data（）{return {imageData:{},img:null,mouseDown:true,$stage:"",$image:"",imgLoading:false}
}methods:{greet(obj){Object.assign(this.imageData,{left:obj.left,top:obj.top});},mouseDowns(){this.mouseDown = false;},mouseUps(){this.mouseDown = true;},imgToSize(e){if(this.mouseDown){e.preventDefault();let delta = 1;if(e.deltaY){delta = e.deltaY > 0 ? 1 : -1;}else if(e.wheelDelta){delta = -e.wheelDelta / 120;}else if(e.detail){delta = e.detail > 0 ? 1 : -1;}let ratio = -delta * 0.1;let pointer = {x:e.clientX - this.$stage.offset().left + document.documentElement.scrollLeft || document.body.scrollLeft,y:e.clientY - this.$stage.offset().top + document.documentElement.scrollTop || document.body.scrollTop};this.zoom(ratio,pointer,e);}},zoom(ratio,origin,e){ratio = ratio < 0 ? 1 / (1 - ratio) : 1 + ratio;ratio = this.$image.width() / this.imageData.originalWidth * ratio;if(ratio > 16 || ratio < 0.1){return;}this.zoomTo(ratio,origin,e);},zoomTo(ratio,origin,e){let imgData = {w:this.imageData.width,h:this.imageData.height,x:this.imageData.left,y:this.imageData.top};var stageData = {w:this.$stage.width(),h:this.$stage.height(),x:this.$stage.offset().left,y:this.$stage.offset().top};let newWidth = this.imageData.originalWidth * ratio,newHeight = this.imageData.originalHeight * ratiolet newLeft = origin.x - (origin.x - imgData.x) / imgData.w * newWidth,newTop = origin.y - (origin.y - imgData.y) / imgData.h * newHeight;let δ = !false ? 0 : (newWidth - newHeight) / 2,imgNewWidth = !false ? newWidth : newHeight,imgNewHeight = !false ? newHeight : newWidth;let offsetX = stageData.w - newWidth,offsetY = stageData.h - newHeight;if(imgNewHeight <= stageData.h){newTop = (stageData.h - newHeight) / 2;}else{newTop = newTop > δ ? δ : newTop > offsetY - δ ? newTop : offsetY - δ;}if(imgNewWidth <= stageData.w){newLeft = (stageData.w - newWidth) / 2;}else{newLeft = newLeft > -δ ? -δ : newLeft > offsetX + δ ? newLeft : offsetX + δ;}if(Math.abs(this.imageData.initWidth - newWidth) < this.imageData.initWidth * 0.05){this.setImageSize(this.img);}else{this.$image.css({width:Math.round(newWidth) + 'px',height:Math.round(newHeight) + 'px',left:Math.round(newLeft) + 'px',top:Math.round(newTop) + 'px'});}Object.assign(this.imageData,{width:newWidth,height:newHeight,left:newLeft,top:newTop});},setImageSize(img){//控制图片的显示let stageData = {w:this.$stage.width(),h:this.$stage.height()};let scale = this.getImageScaleToStage(stageData.w,stageData.h);this.$image.css({width:Math.ceil(img.width * scale) + 'px',height:Math.ceil(img.height * scale) + 'px',left:(stageData.w - Math.ceil(img.width * scale)) / 2 + 'px',top:(stageData.h - Math.ceil(img.height * scale)) / 2 + 'px'});Object.assign(this.imageData,{initWidth:img.width * scale,initHeight:img.height * scale,initLeft:(stageData.w - img.width * scale) / 2,initTop:(stageData.h - img.height * scale) / 2,width:img.width * scale,height:img.height * scale,left:(stageData.w - img.width * scale) / 2,top:(stageData.h - img.height * scale) / 2});},getImageScaleToStage(stageWidth,stageHeight){let scale = 1;scale = Math.min(stageWidth / this.img.width,stageHeight / this.img.height,1);return scale;},preloadImg(src,success){let imgs = new Image();imgs.onload = function(){success(imgs);};imgs.src = src;},
}

vue 实现图片查看器（仿windows图片查看器）相关推荐

java实现的本地文件管理器——仿Windows文件资源管理器
完整项目文件下载链接:点击打开链接实现的功能有: 1. 模仿Windows的文件资源管理器对本机的文件目录树的显示,对文件目录进行查看和浏览,用地址栏.文件目录树.打开文件夹等方法都可以在文件 ...
Win10图片打开方式没有“Windows照片查看器”，如何找回？
Win10图片打开方式没有"Windows照片查看器",如何找回? 如果你是全新安装的Win10正式版,那么就会发现当在图片上点击右键时,"打开方式"菜单里熟悉 ...
打开微信另存的 jpg 图片时，提示“Windows 照片查看器无法显示此图片，因为计算机上的可用内存可能不足”
问题描述: 打开微信另存的 jpg 图片或者通过微信拍照上传的图片时,提示"Windows 照片查看器无法显示此图片,因为计算机上的可用内存可能不足",出现以下信息解决方案: 目 ...
jQuery 图片查看插件 Magnify 开发简介（仿 Windows 照片查看器）
前言因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化, ...
解决Win10图片打开方式没有“Windows照片查看器”问题
1.打开注册表编辑器(Win+R,Regedit),定位至(建议修改前备份注册表): HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows Photo Viewe ...
用python的tkinter库制作仿windows看图器
本文原载于我的简书,简书界面干净,更偏向于简书一些,我的简书最近在学习python,就用python自己写了一个仿windows的看图器,在网上搜发现找不到相关的代码,所以决定自己尝试做了一个.看图 ...
怎么在Windows10中找回Windows7的照片查看器（Windows 照片查看器）win10新的照片查看器太难用了
背景 win10用了 "照片"(Photos)替代 "Windows 照片查看器"(Windows Photo Viewer) 这个 "照片" ...
android 仿照ios 图片选择,GitHub - wildma/PictureSelector: Android 图片选择器（仿 IOS 图片选择控件）...
PictureSelector Android 图片选择器(仿 IOS 图片选择控件) 效果图功能特点支持通过拍照获取图片支持通过相册获取图片支持图片是否裁剪两种场景支持仿 IOS 底部弹出 ...
win怎么查看linux文件,Windows下查看LINUX ext2/ext3格式的三种常用方法（图解）
1 Explore2fs 在Windows中,打开浏览器,打开网址http://www.chrysocome.net/explore2fs.下载最新的explore2fs压缩文件... 然后解压.在解 ...

vue 实现图片查看器（仿windows图片查看器）

vue 实现图片查看器（仿windows图片查看器）相关推荐

最新文章

热门文章

vue 实现图片查看器（仿windows图片查看器 ）

vue 实现图片查看器（仿windows图片查看器 ）相关推荐

最新文章

热门文章

vue 实现图片查看器（仿windows图片查看器）

vue 实现图片查看器（仿windows图片查看器）相关推荐