这个签到图片控件非常好用，功能非常强大！
资源文件下载地址：
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.控件效果：
图片太大，后续上传！
