使用Viewer.js图片插件（自由放大/切换/旋转）

最新推荐文章于 2024-08-08 08:24:33 发布

凌涑

最新推荐文章于 2024-08-08 08:24:33 发布

阅读量1.3k

点赞数 1

文章标签： viewer.js viewer 图片查看器

本文链接：https://blog.csdn.net/qq_40943363/article/details/107061998

版权

这个签到图片控件非常好用，功能非常强大！

资源文件下载地址：

1.下载viewer.js 链接：https://pan.baidu.com/s/16-nA5crw6nHf3jYtmXcRTA 提取码：nzgb

2.代码示例

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>暂无数据</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

  <link rel="stylesheet" th:href="@{/admin/layui/css/layui.css}">
  <link rel="stylesheet" th:href="@{/plugins/imgView/viewer.css}" media="all">

  <script th:src="@{/plugins/jquery/jquery-3.4.1.min.js}"></script>
  <script th:src="@{/admin/layui/layui.all.js}"></script>   
  <script th:src="@{/plugins/imgView/viewer.js}"></script> 
  
  
  <style type="text/css">
  	
    .img-div{
    	width: 100%;
		height: 0;
		padding-top: 100%;
		position: relative;
    }
    img{
    	position: absolute;
		top: 10%;
	    left: 10%;
	    bottom: 10%;
	    right: 10%;
	    width: 80%;
	    height: 80%;
    }
    
    .layui-field-title {
    	margin: 20px 0 20px;
	}
	#pic-ul li img{
		cursor:pointer
	}
	
	.pic-action, .pic-action a{
		color:#01AAED;
	}
	
	.pic-action a:hover{
		color:#01AAED;
		text-decoration:underline;
	}
	
  </style>
</head>
<body>


	<div class="layui-fluid" >
	  
	  <div class="layui-row layui-col-space15">
            <div class="layui-card">
              <div class="layui-card-header">照片信息</div>
              <div class="layui-card-body">

            	<div class="layadmin-shortcut" id="pic-ul">
                    <ul class="layui-row " >
                      <li class="layui-col-xs4">
                          <div class="img-div"><img id="sfzzp" src="../images/none.jpg" alt="身份证照片"></div>
                          <cite class="cite-bottom">身份证照片</cite>
                      </li>
                      <li class="layui-col-xs4">
                          <div class="img-div"><img id="sfzzp-z" src="../images/none.jpg" alt="身份证正面照片"></div>
                          <cite class="cite-bottom">身份证正面照片</cite>
                      </li>
                      <li class="layui-col-xs4">
                          
                          <div class="img-div"><img id="sfzzp-f" src="../images/none.jpg" alt="身份证反面照片"></div>
                          <cite class="cite-bottom">身份证反面照片</cite>
                      </li>       
                      
                    </ul>
                    
                    
                </div>
              </div>
          </div>
    </div>
	</div>

 <script th:inline="javascript">
 	var zpList = [[${zpList}]];
    var photoDatas = new Array();
    var j = 0;
    for(var i = 0; i < zpList.length; i++){

    	var zpxx = zpList[i];
        //TODO 渲染数据
   		$("#sfzzp").parents("li").append("<div class='pic-action'><a href='javascript:void(0);' onclick=\"exports('"+ zpxx.id +"');\">导出</a>    |    <a href='javascript:void(0);' onclick=\"prints('#sfzzp');\">打印</a></div>")
   	    		
   	    $("#sfzzp").attr("data-original","data:image/bmp;base64," + zpxx.fileText);
   			
   		//省略不重要的 ........	
   		
    }
    
  	//图片插件核心代码    
    //注意控件渲染的ID ，如pic-ul 必须是唯一的元素，如果是class，这个选择器class只能选择一个元素
	var viewer = new Viewer(document.getElementById("pic-ul"), {
            url: 'data-original',
            navbar: false,//点开查看的时候不显示缩略图
     	    // 自定义title
            /* title: function() {
                const viewdiv = '上传人';
                return viewdiv;
            } */
    });
	
 </script>

</body>
</html>

3.控件效果：

图片太大，后续上传！