前端viewer.js实现图片预览

最新推荐文章于 2024-06-27 16:21:53 发布

捻tua馔...

最新推荐文章于 2024-06-27 16:21:53 发布

阅读量981

点赞数 2

文章标签：大前端

本文链接：https://blog.csdn.net/lwl12345678_/article/details/113632860

版权

前端viewer.js实现图片预览

github地址

https://github.com/fengyuanchen/viewerjs#options

下载文件

在这里插入图片描述
git clone 复制的链接

在js外部依赖中导入如下文件即可使用(/viewerjs\dist文件路径下)

在这里插入图片描述

vue非脚手架中使用

以下是动态绑定数据状态下的代码直接拷过来的

<link rel="stylesheet" href="../../../js/plugins/viewerjs/viewer.css">

<script src="../../../js/plugins/viewerjs/viewer.js"></script>

<img :title="'创建时间：'+item.createTime+' 大小：'+item.size+'kb'" style="width: 100%;height:100px;cursor: pointer;" @click='getDisplay(item.filePath,index)' :class='"imageClass"+index' :data-original='imageSrc' src="../../../img/image.jpg">

getDisplay(path,index){
	this.path = path;
   	this.index = index;	
    const tempPath = path.substring(path.indexOf('fileserver'),path.length);
    this.imageSrc = this.baseURL + tempPath;
    var viewer = new Viewer(document.querySelector(`.imageClass${index}`),{url:'data-original'});
},

注意点

1.new Viewer(element,Object); 该构造方法，第一个参数必传，是dom或者jquery对象，并且该节点一定得是图片，不然会报错；这样的话，该点击事件getDisplay()绑定在按钮上也是可以的，只要保证两个参数正确。
绑定给按钮：

<el-button @click='btnClick'>点击</el-button>

这里的this.path,this.index是参数，这里不必纠结，因为代码是参照我的项目的具体情况来的，开发人员只需要再点击按钮时，拿到图片链接就好了；

btnClick(){
    document.querySelector(`.imageClass${this.index}`).click();
    this.getDisplay(this.path,this.index);
},

第二个参数是个对象，是预览图片时的配置栏；
在这里插入图片描述
2.img标签上的*:data-original*要绑定的是预览时的图片链接，在这里是动态的，所以我采用绑定方式，在每次new Viewer之前将图片链接赋值过去

3.通常使用默认的配置就足够使用了

jquery拿来即用(示例)

实现图片预览和左右滑动以及大小缩放旋转等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./js/viewer.min.css">
</head>
<body>
    <ul id="dowebok" style="width: 100%;display: flex;flex-wrap: wrap;">
        <li style="width: 30%;"><img style="width: 100%;height: auto;" data-original="img/1.jpg" src="img/1jpg" alt="图片1"></li>
        <li style="width: 30%;"><img style="width: 100%;height: auto;" data-original="img/2.jpg" src="img/2.jpg" alt="图片2"></li>
        <li style="width: 30%;"><img style="width: 100%;height: auto;" data-original="img/3.jpg" src="img/3.jpg" alt="图片3"></li>
        <li style="width: 30%;"><img style="width: 100%;height: auto;" data-original="img/4.jpg" src="img/4.jpg" alt="图片4"></li>
        <li style="width: 30%;"><img style="width: 100%;height: auto;" data-original="img/5.jpg" src="img/5.jpg" alt="图片5"></li>
    </ul>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/viewer.min.js"></script>
    <script>
        $('img').click(function(){
            var viewer = new Viewer(document.querySelector('#dowebok'), {
                url: 'data-original',
            });
        })
    </script>
</body>
</html>

捻tua馔...

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
前端viewer.js实现图片预览

前端viewer.js实现图片预览github地址https://github.com/fengyuanchen/viewerjs#options下载文件git clone 复制的链接在js外部依赖中导入如下文件即可使用(/viewerjs\dist文件路径下)vue非脚手架中使用<link rel="stylesheet" href="../../../js/plugins/viewerjs/viewer.css"><script src="../../../js
复制链接

扫一扫