jquery实现图片在div内部进行预览（支持放大、缩小、拖拽）

快来打我* 2023-07-23 09:58 42阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		  <script src="../../jquery.min.js"></script>
    		  <style>
    			
    		  </style>
    	</head>
    	<body >
    	<div id="a" style="width:700px;height:600px;border:1px solid green;">
    			<div id="id_document_img_root" style="position: relative; height: 100%;width: 100%;">
    
    				<div class="id_document_img-viewer-container" style="width: 100%; height: 100%; overflow: hidden; position: absolute;">
    					<div class="id_document_img-viewer-canvas" style="position: absolute; ">
    						<div id="id_document_img_container" style="position: absolute; transform: scale(1);">
    							<img  id='id_document_img_img'   style="position: absolute;width: auto; height: auto; display: block;"/>
    						</div>
    					</div>
    				</div>
    				
    			</div>
    	
    	</div>
    	
    
    	
    
    	</body>
    	<script>
    
    
    
    /*
     * 	当鼠标按住时，需要实现图纸随之鼠标移动
     * 	这个属性记录当前是否属于图纸拖动状态
     */
    var svg_distinguish_isDrag = false;//是否开始拖动图纸  【false 不拖拽】
    // 拖动图纸专用变量 ，拖动图纸时的点的坐标
    var svg_distinguish_disX,svg_distinguish_disY;//图片相对于图片的位置
    /**
     * 包裹图片的各类id
     * @type {null}
     */
    var imageId4Root = null;
    var imageId4Container = null;
    var imageId4Img = null;
    
    
    /**
     * @note 是否初始化过一次
     * @description 针对只需要初始化一次的功能，这个参数很重要，故是全局参数
     * @type {boolean}
     */
    var initialized = false;
    
    //这里是写死的，因为没必要是动态的
    var rootId = "id_document_img"
    /**
     * DwgViewer
     *
     * @param {object} 图片渲染的实体
     * @constructor
     */
    function ImageViewer(url,elementId,callback) {
        this.url = url;
    	
    	//获取外框的尺寸
        var width4Panel = $("#"+elementId).width();
        var height4Panel = $("#"+elementId).height();
    	
    	// 外框边界的坐标，获取页面某一元素的绝对X,Y坐标
    	var minx = $('#'+elementId).offset().left; 
    	var miny = $('#'+elementId).offset().top;
    	//alert(minx+"--"+miny);
        var maxx = minx+width4Panel;
    	var maxy = miny+height4Panel;
    	
    	//必须预留出一片空白区域，不然拖动的状态(svg_distinguish_isDrag)无法监听到了
    	minx = minx+20;
    	miny = miny+20;
    	maxx = maxx-20;
    	maxy = maxy-20;
    	
    	//alert(maxx+"--"+maxy);
        //追加html.只初始化一次
     
        imageId4Root = rootId+"_root";
        imageId4Container = rootId+"_container";
        imageId4Img = rootId+"_img";
    
    
        //console.log(width4Panel+"---"+height4Panel);
        //图片加载后，自动居中
        $('#'+imageId4Img).on("load",function () {
    	
    		
    
            var imgWidth = $('#'+imageId4Img).width();
            var imgHeight = $('#'+imageId4Img).height();
            var centerTop = (height4Panel-imgHeight)/2;
            var centerLeft = (width4Panel-imgWidth)/2;
            $("#"+imageId4Img).css({
                top:centerTop,
                left:centerLeft
            });
            //回调
            callback();
        });
        $('#'+imageId4Img).attr("src",url);
        /*
    	 * 绑定滚轮和右击事件
    	 */
        var imgRoot = document.getElementById(imageId4Root);
        var image_container = document.getElementById(imageId4Container);
        if(document.addEventListener){
            //js添加鼠标滚轮监听事件
            imgRoot.addEventListener('DOMMouseScroll',img_scrollFunc,false);
            //鼠标右击
            imgRoot.addEventListener('contextmenu',svg_distinguish_contextmenuFunc);
    
        }
        imgRoot.onmousewheel = img_scrollFunc;
    
        //初始化移动事件
        init_img_moveFunc(imgRoot,image_container,{minx:minx,miny:miny,maxx:maxx,maxy:maxy});
    
        /**
         * 空格绑定P&ID图纸复位功能
         */
        if(!initialized){
            $(document).keydown(function(e) {
                if (e.which === 32) {
                    this.zoomExtents();
                }
            });
            initialized = true;
        }
    
    }
    
    /**
     * @note 复位功能（没想好咋实现？？？）
     */
    ImageViewer.prototype.zoomExtents = function() {
    
    }
    
    /**
     * 绑定鼠标移动事件
     * @param event
     */
    function init_img_moveFunc(imgRoot,image_container,borderPosition) {
    
        //鼠标按下时
        image_container.onmousedown = function(e){
            svg_distinguish_isDrag = true;
            this.style.cursor = 'pointer';//move
            e = e||window.event;//兼容性写法
            e.preventDefault();
            //鼠标位置
            var x = e.clientX;
            var y = e.clientY;
            //鼠标相对于图片的位置
            svg_distinguish_disX = x-this.offsetLeft;
            svg_distinguish_disY = y-this.offsetTop;
        }
        //鼠标移动时
        imgRoot.onmousemove = function(e){
            e = e || window.event;//兼容性写法
            e.preventDefault();
            //鼠标位置
            var x = e.clientX;
            var y = e.clientY;
    		console.log('x:'+x+',y:'+y);
            if(svg_distinguish_isDrag){
    			if(x>borderPosition.minx && x<borderPosition.maxx && y>borderPosition.miny && y<borderPosition.maxy){
    			
    				//修改图片位置
    				image_container.style.left = x - svg_distinguish_disX + 'px';
    				image_container.style.top = y - svg_distinguish_disY + 'px';
    			}else{
    				svg_distinguish_isDrag = false;
    			}
    		
            }
        }
    
        //鼠标抬起时
        imgRoot.onmouseup = function(e) {
            e = e||window.event;//兼容性写法
            e.preventDefault();
            svg_distinguish_isDrag = false;
            image_container.style.cursor = 'default';
        }
    
    }
    
    /**
     * 绑定滚轮事件
     */
    function img_scrollFunc(event){
        event = event ||window.event;//兼容性写法
        event.preventDefault();
    
        var image_container = document.getElementById(imageId4Container);
        var endIndex = image_container.style.transform.length - 1;
        var currentScale = image_container.style.transform.slice(6, endIndex);
        currentScale = Number(currentScale);
    
    
        var x = event.clientX;
        var y = event.clientY;
        //鼠标相对于图片的位置
        var disX = x-image_container.offsetLeft;
        var disY = y-image_container.offsetTop;
    
        var	_scale = null;
    
        if(event.wheelDeltaY > 0){
            // 滚轮上滚放大
            _scale = currentScale + 0.01;
        }else{
            // 滚轮下滚缩小
            _scale = currentScale - 0.01;
        }
        _scale = _scale.toFixed(2);
    
        if(_scale - 0.1 <= 0){
            return false
        }
        var prop = _scale / currentScale;
    
        var currentLeft = x - disX*prop;
        var	currentTop = y - disY*prop;
    
        image_container.style.transform = "scale("+ _scale +")";
    
        $("#"+imageId4Container).css('left', currentLeft).css('top', currentTop);
    }
    /**
     * 右击事件
     * @param event
     * @returns
     */
    function svg_distinguish_contextmenuFunc(event){
        event = event ||window.event;//兼容性写法
        event.preventDefault();
        console.log("left: "+event.pageX+";"+"top:  "+event.pageY);
        // $('#id_result4Relation_pipelines_menu').menu('show', {
        //     left: event.pageX + "px",
        //     top:  event.pageY + "px"
        // });
    
    }
    function showErrorMessage(msg) {
        alert(msg);
    }
    
    ImageViewer("./image/1.jpg","a",function(){
    	
    });
    	
    	</script>
    </html>

图片和jquery.js就不贴了。

这个案例都用的最基础的代码。复用率高。备份下

不过还是希望做成插件或者有现成的插件能提供在线预览图片的诸多功能，毕竟不想重复发明轮子。

如果有大虾了解功能强大又方便定制的图片预览，希望能告留言我）。

Viewer.js就不用提了，强大到有些难上手了。

[https://github.com/fengyuanchen/jquery-viewer][https_github.com_fengyuanchen_jquery-viewer]

[https_github.com_fengyuanchen_jquery-viewer]: https://github.com/fengyuanchen/jquery-viewer