js 写一个前端图片查看器

蔚落 2023-02-09 05:22 7阅读 0赞

**1. 前言**

网上已经有不少成熟的图片查看器插件，如果是单纯想要点击图片放大预览的话，可以直接使用插件。例如[viewerjs][]

但是，当打开图片后还需要对图片进行一些像删除、下载、标记等业务层面上的操作，使用插件就显得不那么便捷，于是决定自己简单写个图片查看器

**2. 设计思路**

项目中用的是vue+iview，于是使用Modal弹窗组件做为播放器的盒子，考虑需要用到的基本功能有：  
放大缩小、  
监听鼠标滚轮放大缩小、  
拖拽、  
全屏查看、  
查看上/下一张、  
双击图片回到初始大小和初始位置

**3. 完成效果**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70]  
**4. 代码思路**

## html部分： ##

<Modal
    	id="picture_viewer_modal"
    	v-model="visible"
    	:mask-closable = "false"
    	@on-cancel="cancel()"
    	footer-hide
    	width="70%"
    	:fullscreen="fullscreen"
    >
    	<div class="wrap">
    		<p class="num_tip">第 {
       {index+1}}/{
       {picArr.length}} 张</p>
    		
    		
    		<div id="father" class="box">
    		    <img id="box" class="img_max img_auto" @dblclick="getDefault()" :src="row.src">
    		    
    		    <span class="next_btn btn_left" @click="left()"></span>
    		    
    		    <span class="next_btn btn_right" @click="right()"></span>
    		</div>
    		
    		
    		<div class="tool_bar">
    		    
    		    <span class="tool_btn btn_1" @click="cutPic()"></span>
    		    
    		    <span class="tool_btn btn_2" @click="fullScreen()"></span>
    		    
    		    <span class="tool_btn btn_3" @click="big()"></span>
    		    
    		    <span class="tool_btn btn_4" @click="small()"></span>
    		    
    		    <span class="tool_btn btn_5" @click="download()"></span>
    	       
    	       <span class="tool_btn btn_8" @click="choose()"></span>
    	       
    	       <span class="tool_btn btn_9" @click="del(row.id)"></span>
    	   </div>
    	</div>
    </Modal>

## js部分： ##

props: { 
        picList:Array,
        rowData:Object
    },
    data() { 
        return { 
        	//弹窗显隐
            visible: false,
            //当前查看的图片
            row: { },
            //当前查看的图片在数组中的位置
            index: 0,
            //所有图片
            picArr: [],
            //是否全屏
            fullscreen: false,
        };
    },
    watch: { 
    	//监听弹窗打开事件
        modal(val) { 
            this.visible = val;
            if(val){ 
                this.init();
                this.getObj();
            }
        },
    },
    mounted(){ 
        this.move(); 
    },
    methods: { 
         /** * 打开弹窗后，获取传入弹窗组件的数据 */
    	 getObj(){ 
             this.row = this.rowData.row;
             this.index = this.rowData.index;
             this.picArr = this.picList;
         },
         /** * 初始化 */
         init(){ 
             this.fullscreen = false;
             //重新打开后图片要重置回默认大小和居中
             this.getDefault();
         },
         /** * 双击图片恢复默认大小、位置 */
         getDefault(){ 
             var image = document.getElementById("box");
             image.classList.add('img_max');
             image.classList.add('img_auto');
             box.style.left = '50%';
             box.style.top = '50%';
             box.style.transform = 'translate(-50%,-50%)';
         },
         /** * 拖拽移动 */
         move(){ 
             var thiz = this;
             thiz.$nextTick(() => { 
                 var box = document.getElementById("box");
                 var fa = document.getElementById('father');
                 // 图片移动效果
                 box.onmousedown=function(ev) { 
                     var oEvent = ev;
                     // 浏览器有一些图片的默认事件,这里要阻止
                     oEvent.preventDefault();
                     var disX = oEvent.clientX - box.offsetLeft;
                     var disY = oEvent.clientY - box.offsetTop;
                     fa.onmousemove=function (ev) { 
                         oEvent = ev;
                         oEvent.preventDefault();
                         var x = oEvent.clientX - disX;
                         var y = oEvent.clientY - disY;
    
                         // 图形移动的边界判断
                         // x = x <= 0 ? 0 : x;
                         // x = x >= fa.offsetWidth-box.offsetWidth ? fa.offsetWidth-box.offsetWidth : x;
                         // y = y <= 0 ? 0 : y;
                         // y = y >= fa.offsetHeight-box.offsetHeight ? fa.offsetHeight-box.offsetHeight : y;
                         box.style.left = x + 'px';
                         box.style.top = y + 'px';
                         //取消居中效果
                         // box.style.transform = 'translate(0,0)';
                     };
                     // 图形移出父盒子取消移动事件,防止移动过快触发鼠标移出事件,导致鼠标弹起事件失效
                     fa.onmouseleave = function () { 
                         fa.onmousemove = null;
                         fa.onmouseup = null;
                     };
                     // 鼠标弹起后停止移动
                     fa.onmouseup=function() { 
                         fa.onmousemove = null;
                         fa.onmouseup = null;
                     }
                 }
                 //监听鼠标滚轮放大缩小
                 box.addEventListener("mousewheel", MouseWheelHandler, false);// IE9, Chrome, Safari, Opera
                 box.addEventListener("DOMMouseScroll", MouseWheelHandler, false);// Firefox
                 function MouseWheelHandler(e) { 
                     // cross-browser wheel delta 
                     var e = window.event || e; // old IE support 
                     var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));//IE、Opera、Safari、Chrome e.wheelDelta,Firefox中 e.detail 判断是向上还是向下滚动负值delta取-1 正值delta取1 
                     box.height = Math.max(100, Math.min(2500, box.height + (50 * delta)));
                     box.classList.remove('img_max');
                     box.classList.remove('img_auto');
                     return false;
                 }
             });
         },
         /** * 全屏 */
         fullScreen(){ 
         	 //控制弹窗全屏
             this.fullscreen = !this.fullscreen;
             //图片恢复默认大小、位置
             this.getDefault();
         },
         /** * 放大 */
         big(){ 
             var image = document.getElementById("box");
             if (image.height <= 2500) { 
                 image.height = image.height + 40;
             }
             image.classList.remove('img_max');
             image.classList.remove('img_auto');
         },
         /** * 缩小 */
         small(){ 
             var image = document.getElementById("box");
             if (image.height > 100) { 
                 image.height = image.height - 40;
             }
             image.classList.remove('img_auto');
         },
         /** * 查看上一张 */
         left(){ 
             var thiz = this;
             if(thiz.index == 0){ 
                 //如果是第一张，则跳到最后一张
                 thiz.index = thiz.picArr.length - 1;
                 thiz.row = thiz.picArr[thiz.index];
             }else{ 
                 thiz.index = thiz.index - 1;
                 thiz.row = thiz.picArr[thiz.index];
             }
             //查看上下一张的时候，图片回到初始大小和位置，这里会闪烁，待优化
             this.getDefault();
         },
         /** * 查看下一张 */
         right(){ 
             var thiz = this;
             if(thiz.index == thiz.picArr.length-1){ 
                 //如果是最后一张，则跳到第一张
                 thiz.index = 0;
                 thiz.row = thiz.picArr[thiz.index];
             }else{ 
                 thiz.index = thiz.index + 1;
                 thiz.row = thiz.picArr[thiz.index];
             }
             //查看上下一张的时候，图片回到初始大小和位置，这里会闪烁，待优化
             this.getDefault();
         },
    }

## css部分： ##

//less
    @pictureBg: #fff,
    @pictureBorder: #fff,
    @pictureCloseBg: #fff,
    @pictureCloseBorder: #1A82FD,
    @pictureClose: #1A82FD,
    @pictureBtn1: url('../assets/map/view_image/icon_cut_blue.png')
    @pictureBtn2: url('../assets/map/view_image/icon_move_blue.png')
    @pictureBtn3: url('../assets/map/view_image/icon_zoom_blue.png')
    @pictureBtn4: url('../assets/map/view_image/icon_reduce_blue.png')
    @pictureBtn5: url('../assets/map/view_image/icon_download_blue.png')
    @pictureBtn6: url('../assets/map/view_image/icon_play_blue.png')
    @pictureBtn7: url('../assets/map/view_image/icon_video_blue.png')
    @pictureBtn8: url('../assets/map/view_image/icon_chose_blue.png')
    @pictureBtn9: url('../assets/map/view_image/icon_delete_blue.png')
    @pictureBtnHov1: url('../assets/map/view_image/icon_cut_hov.png')
    @pictureBtnHov2: url('../assets/map/view_image/icon_move_hov.png')
    @pictureBtnHov3: url('../assets/map/view_image/icon_zoom_hov.png')
    @pictureBtnHov4: url('../assets/map/view_image/icon_reduce_hov.png')
    @pictureBtnHov5: url('../assets/map/view_image/icon_download_hov.png')
    @pictureBtnHov6: url('../assets/map/view_image/icon_play_hov.png')
    @pictureBtnHov7: url('../assets/map/view_image/icon_video_hov.png')
    @pictureBtnHov8: url('../assets/map/view_image/icon_chose_hov.png')
    @pictureBtnHov9: url('../assets/map/view_image/icon_delete_hov.png')
    #picture_viewer_modal{ 
    	.ivu-modal{ 
    		//覆盖modal关闭按钮样式 .ivu-modal-close{ 
    	        right: -12px;
    	        top: -12px;
    	        border-radius: 100px;
    	        background: @pictureCloseBg;
                border:1px solid @pictureCloseBorder;
    	        .ivu-icon-ios-close{ 
    	            font-size: 24px;
    	            color: @pictureClose;
    	        }
    	    }
    	    //覆盖modal弹窗盒子样式 .ivu-modal-content{ 
    	    	background: @pictureBg;
                border:1px solid @pictureBorder;
    	        border-radius: 0; .ivu-modal-body{ 
    	            height: 80vh;
    	            padding: 35px 15px 0;
    	            overflow: hidden;
    	        }
    	        
    	        // 内容样式 .wrap{ 
    	            height: 100%; >.num_tip{ 
    	            	color: @pictureClose;
    	                position: absolute;
    	                top: 10px;
    	                left: 15px;
    	                z-index: 9;
    	            }
    	            //图片盒子样式 >.box{ 
    	                height: calc(100% - 20px - 1.2vw);
    	                position: relative; //展示的图片样式 >img{ 
    	                    position: absolute;
    	                    top: 50%;
    	                    left: 50%;
    	                    transform: translate(-50%, -50%);
    	                    cursor: move; &.img_auto{ 
    	                        width: auto;
    	                        height: auto;
    	                    }
    	                    &.img_max{ 
    	                        max-height: 100%;
    	                        max-width: 100%;
    	                    }
    	                }
    	                //上/下一张按钮样式 >.next_btn{ 
    	                    display: block;
    	                    width: 3vw;
    	                    height: 3vw;
    	                    position: absolute;
    	                    top: 50%;
    	                    margin-top: -1.5vw;
    	                    cursor: pointer;
    	                    transition: all 0.2s; &.btn_left{ 
    	                        left: 6px;
    	                        background: url('../../../assets/map/view_image/btn_left.png') no-repeat;
    	                        background-size: 100% 100%; &:hover{ 
    	                            background: url('../../../assets/map/view_image/btn_left_hov.png') no-repeat;
    	                            background-size: 100% 100%;
    	                        }
    	                    }
    	                    &.btn_right{ 
    	                        right: 6px;
    	                        background: url('../../../assets/map/view_image/btn_right.png') no-repeat;
    	                        background-size: 100% 100%; &:hover{ 
    	                            background: url('../../../assets/map/view_image/btn_right_hov.png') no-repeat;
    	                            background-size: 100% 100%;
    	                        }
    	                    }
    	                }
    	            }
    	         
    	         	//底部工具条样式 >.tool_bar{ 
    	                text-align: center;
    	                font-size: 0;
    	                position: relative;
    	                z-index: 9; .tool_btn{ 
    	                    font-size: 12px;
    	                    display: inline-block;
    	                    width: 1.2vw;
    	                    height: 1.2vw;
    	                    margin: 10px 0.8vw;
    	                    transition: all 0.2s;
    	                    cursor: pointer;
    	                }
    	                .btn_1{ 
                            background: @pictureBtn1 no-repeat;
                            background-size: 100% 100%; &:hover{ 
                                background: @pictureBtnHov1 no-repeat;
                                background-size: 100% 100%;
                            }
                        }
                        .btn_2{ 
                            background: @pictureBtn2 no-repeat;
                            background-size: 100% 100%; &:hover{ 
                                background: @pictureBtnHov2 no-repeat;
                                background-size: 100% 100%;
                            }
                        }
                        .btn_3{ 
                            background: @pictureBtn3 no-repeat;
                            background-size: 100% 100%; &:hover{ 
                                background: @pictureBtnHov3 no-repeat;
                                background-size: 100% 100%;
                            }
                        }
                        .btn_4{ 
                            background: @pictureBtn4 no-repeat;
                            background-size: 100% 100%; &:hover{ 
                                background: @pictureBtnHov4 no-repeat;
                                background-size: 100% 100%;
                            }
                        }
                        .btn_5{ 
                            background: @pictureBtn5 no-repeat;
                            background-size: 100% 100%; &:hover{ 
                                background: @pictureBtnHov5 no-repeat;
                                background-size: 100% 100%;
                            }
                        }
                        .btn_6{ 
                            background: @pictureBtn6 no-repeat;
                            background-size: 100% 100%; &:hover{ 
                                background: @pictureBtnHov6 no-repeat;
                                background-size: 100% 100%;
                            }
                        }
                        .btn_7{ 
                            background: @pictureBtn7 no-repeat;
                            background-size: 100% 100%; &:hover{ 
                                background: @pictureBtnHov7 no-repeat;
                                background-size: 100% 100%;
                            }
                        }
                        .btn_8{ 
                            background: @pictureBtn8 no-repeat;
                            background-size: 100% 100%; &:hover{ 
                                background: @pictureBtnHov8 no-repeat;
                                background-size: 100% 100%;
                            }
                        }
                        .btn_9{ 
                            background: @pictureBtn9 no-repeat;
                            background-size: 100% 100%; &:hover{ 
                                background: @pictureBtnHov9 no-repeat;
                                background-size: 100% 100%;
                            }
                        }
    	            }
    	        }
    	    }
    	
    	    //弹窗全屏样式 &.ivu-modal-fullscreen{ 
    	        .ivu-modal-close{ 
    	            right: 0;
    	            top: 0;
    	        }
    	        .ivu-modal-content{ 
    	            .ivu-modal-body{ 
    	                height: 100vh;
    	                overflow: hidden;
    	            }
    	        }
    	    }
    	}
    }

[viewerjs]: https://blog.csdn.net/HuangsTing/article/details/106187645
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200518105501327.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc=,size_16,color_FFFFFF,t_70