Vue.js结合jQuery.js实现在指定区域内图片鼠标滚轮控制放大缩小、左键按住实现拖拽以及左键双击旋转效果
工作项目中,使用vue.js+require.js还有少量的JQuery.js组成的前端JS环境,样式用的element-ui,工作需求是要对APP端传到PC端页面的十几张甚至几十张图片进行显示,且与OCR识别图片中的信息进行人工比对,这就需要PC端的工作人员细致的查看图片,要支持在指定的div中图片可放大、缩小、可拖动、可旋转。
编辑html(style样式应格外注意一下)
用下面一个DIV代码片段作为说明
<!--div样式高、宽、边框样式可自行修改;mousedown事件是鼠标左键按下按住事件 -->
<div id="sfzGhImageDiv" @mousedown="mousedown('sfzGhImageDiv')" style="overflow: hidden; position: relative; width: 570px; height: 300px;border:1px solid #000;">
<template slot-scope="scope">
<!--img样式高、宽、边框样式可自行修改,需与div的大小一致;mousewheel是滚轮滚动事件,event参数可以传递滚轮滚动事件的一些参数(注意:好像火狐浏览器这个事件名);dblclick是鼠标双击事件 -->
<img id="sfzGhImage" @mousewheel="imgToSize(sfzGhImage,event)" @dblclick="imgRotateRight(xingshizhengImage)" :src=OCRModel.OCRSfzURL_ZM alt="身份证正面图片(国徽面)" style="cursor: move; visibility: visible; position: absolute; width: 570px; height: 300px;">
</template>
</div>
引入JS
js文件,本文章最后的引用链接中,第一个已有,可移步下载,此处不再赘加
<!-- 引入以下的jQuery相关的JS,为了OCR图片放大缩小鼠标拖动功能 -->
<script src="../js/jquery/jquery-1.10.2.js"></script>
<script src="../js/jquery/jquery.imageView.js"></script>
<script src="../js/jquery/jquery-browser.js"></script>
在Vue的methods标签内写function方法
//OCR图片放大缩小功能(所有图片div通用,通过jQuery的id绑定操作)
"imgToSize" : function(imgId,event) {
//通过这个值与零的大小比较,可以知道鼠标的滚轮滚动的方向
var deltaY = event.deltaY;
var size = 0;
if(deltaY > 0){
size = -100;
}else if(deltaY < 0){
size = 100;
}
var img = $("#"+imgId.id);
//取得图片的实际宽度
var oWidth = img.width();
//取得图片的实际高度
var oHeight = img.height();
//赋予改变后的值
img.width(oWidth + size);
img.height(oHeight + size / oWidth * oHeight);
}
//鼠标左键按下,拖动照片事件(所有图片div通用,通过jQuery的id绑定操作)
"mousedown" : function(id){
//width: 570, height: 300,需与div的大小一致
$("#"+id).imageView({ width: 570, height: 300 });
}
//图片向右旋转90度
//注意:imgRotate是要定义在方法之外的全局变量,这样每次点击才会产生累加效果!!!!
"imgRotateRight" : function(imgId){
var img = $("#"+imgId.id);
imgRotate += 90;
img.css('transform', 'rotate(' + imgRotate + 'deg)');
}
在这过程中,还遇到一个问题:就是当需要显示图片很多,按顺序排下来远远超过了屏幕的宽度,当你想对某一张图片鼠标滚轮放大缩小操作的时候,整个页面也会跟着上下动,好烦人,怎么办呢?
把鼠标的光标放在图片上,按住shift键,再滑动鼠标,你会发现,页面不动了,只是光标下方的图片在被放大、缩小!哈哈!
<<<<<<<<<<<<<<<<<<<<<<<<<<<<
解决问题过程中,通过网上查阅,得到了一些前辈的博客文章的指点,帮助解决了问题,再次感谢,并把最有帮助的文章引用至此:
div内部实现图片旋转、放大、缩小、拖拽
JavaScript图片的放大缩小及拖拽