这篇文章给大家介绍了“基于JS怎样写图片查看器，代码是什么”的相关知识，讲解详细，步骤过程清晰，有一定的借鉴学习价值，因此分享给大家做个参考，感兴趣的朋友接下来一起跟随小编看看吧。

1. 前言

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

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

2. 设计思路

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

3. 完成效果

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;
                }
            }
        }
    }
}

关于“基于JS怎样写图片查看器，代码是什么”就介绍到这了，如果大家觉得不错可以参考了解看看，如果想要了解更多，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• stylelint如何安装和配置，正确的使用是怎样的

  eslint的配置引入比较简单，网上有比较多的教程，而stylelint的教程大多语焉不详。在这里，我会介绍一下我在引入stylelint所遇到的坑，以及解决方法

• React传递参数的方式有哪些？

  React传递参数的方式有哪些？对于React传递参数，有父子组件之间传递参数和路由传参，那么具体怎样实现呢？下面小编给大家分享几个实例，有需要的朋友可以参考。

• 如何利用JS制作轮播的年份选择功能，思路是什么

  这篇文章主要给大家介绍了关于如何使用js原生实现年份轮播选择效果的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• JS作用域是什么意思，如何支持块级作用域的

  本篇文章给大家带来关于JavaScript中块级作用域的实现原理相关知识，在ES6之前，块级作用域是不被JavaScript所支持的，JavaScript是通过什么支持了块级作用域的呢？本文将讲解块级作用域的底层实现原理，希望对大家有帮助。

• JavaScript的typeof操作符用来做什么，返回值是什么

  typeof操作符返回字符串，表示未计算操作数的类型。typeof一般用来检验简单的数据类型，返回的基本类型用字符串表示，而复杂的数据类型中function返回的是Function，其他的都返回Object，其中null特殊，表示一个空对象。