公司用了layui这个框架，需要用到展示图片这个功能，千辛万苦终于实现啦！！！记录一下
后端：
1.controller（我这边是直接从前端传递来图片地址）
@Log(title = "查看图片", businessType = BusinessType.IMPORT)
@GetMapping("/imgView")
@ResponseBody
public String imgView(@RequestParam(value = "path", required = false) String path) throws Exception
{
return xxxxxInfoService.getImgView(path);
}2.service
/**、
* 获取图片
* @param path
* @return
*/
public String getImgView(String path);3.impl (是jpg或者png 等图片就可以直接展示，因为还有tif 图片，前端无法直接展示，所以需要处理一下)
application.yml
xxxPath:
D:\upload\
xxxTifPath:
D:\uploadTif\
package com.ruoyi.common.utils.bean;
import lombok.Data;
import org.springframework.util.ObjectUtils;
import java.util.List;
/**
* layUi图片查看
*/
@Data
public class PhotosBean {
/** 标题*/
private String title;
/** 相册ID*/
private int id;
//初始显示的图片序号，默认0
private int start;
private List<PhotosInfo> data;
public int getStart() {
return ObjectUtils.isEmpty(start)? 0 : start;
}
}package com.ruoyi.common.utils.bean;
import lombok.Data;
/**
* layUi 图片集合
*/
@Data
public class PhotosInfo {
/** 图片名*/
private String alt;
/** 图片id*/
private Integer pid;
/** 原图地址*/
private String src;
/** 图片在服务器的真实路径*/
private String sourcePath;
}
package com.ruoyi.system.eunm;
/**
* 本地地址pool
*/
public interface localPathPool {
/** 类型*/
String TIF = ".tif";
String JPG = ".jpg";
String LOCAL_IMG_PATH = "/localImgPath/";
String LOCAL_TIF_IMG_PATH = "/localTifImgPath/";
}
//----------------------------------------------------------------------package com.ruoyi.system.service.impl;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import com.alibaba.fastjson.JSON;
import com.ruoyi.common.config.ServerConfig;
import com.ruoyi.common.core.domain.AjaxResult;
import com.ruoyi.common.exception.ServiceException;
import com.ruoyi.common.utils.StringUtils;
import com.ruoyi.common.utils.bean.PhotosBean;
import com.ruoyi.common.utils.bean.PhotosInfo;
import com.ruoyi.common.utils.file.FileUtils;
import com.ruoyi.system.domain.YhSatelliteInfo;
import com.ruoyi.system.eunm.localPathPool;
import com.ruoyi.system.mapper.YhSatelliteInfoMapper;
import com.ruoyi.system.service.IYhSatelliteInfoService;
import com.ruoyi.common.core.text.Convert;
import com.sun.org.slf4j.internal.Logger;
import com.sun.org.slf4j.internal.LoggerFactory;
import javax.imageio.ImageIO;
import javax.imageio.stream.FileImageInputStream;
@Service
public class xxxxInfoServiceImpl implements xxxxInfoService
{
private static final Logger log = LoggerFactory.getLogger(xxxxInfoServiceImpl.class);
@Autowired
private ServerConfig serverConfig;
@Value("${xxxPath}")
private String imgPath;
@Value("${xxxTifPath}")
private String tifImgPath;
@Override
public String getImgView(String dirName) {
try {
if(ObjectUtils.isEmpty(imgPath)){
return null;
}
PhotosBean bean = new PhotosBean();
bean.setTitle("查看图片");
bean.setId(0);
bean.setData(getDirPhotos(dirName));
return JSON.toJSONString(bean);
}catch (Exception e){
throw new RuntimeException("获取图片失败：原因是："+e);
}
}
/**
* 获取文件夹下图片
* @param dirName
* @return
*/
public List<PhotosInfo> getDirPhotos(String dirName){
File file = FileUtils.getCheckDir(imgPath + dirName);
if(null != file){
File[] files = file.listFiles();
List<PhotosInfo> list = new ArrayList<>(files.length);
for (int i = 0; i < files.length; i++) {
File fi = files[i];
PhotosInfo photosInfo = new PhotosInfo();
/** 配置文件的本地映射真实路径*/
String localImg = localPathPool.LOCAL_IMG_PATH + dirName + File.separator + fi.getName();
/** 文件下载路径*/
photosInfo.setSourcePath(serverConfig.getUrl() + localImg);
photosInfo.setPid(i);
photosInfo.setAlt(fi.getName());
photosInfo.setSrc(localImg);
/** 如果是tif就需要更改展示路径*/
String type = fi.getName().substring(fi.getName().lastIndexOf("."));
if(localPathPool.TIF.equals(type.toLowerCase())){
/** 获取名称*/
String sendName = fi.getName().substring(0,fi.getName().lastIndexOf("."));
String viewPath = localPathPool.LOCAL_TIF_IMG_PATH + dirName + File.separator + sendName + localPathPool.JPG;
photosInfo.setSrc(viewPath);
try {
tifToJpg(fi,tifImgPath + dirName,sendName);
}catch (Exception e){
log.error(fi.getPath()+"转换失败！");
/** 转换失败默认让他查看一张*/
photosInfo.setSrc(localPathPool.LOCAL_IMG_PATH + "error" + File.separator + "errimg.jpg");
}
}
list.add(photosInfo);
}
return list;
}
return null;
}
public void tifToJpg(File source, String sendDir,String sendName) throws Exception {
String sendPath = sendDir + File.separator + sendName + localPathPool.JPG;
log.info("------------------------需要转换的地址是------------------------：" + sendPath);
new File(sendDir).mkdirs();
if (new File(sendPath).exists()) {
return;
}
oneMakeSingleTif(source,sendPath);
}
public void oneMakeSingleTif(File fTiff,String sendPath) throws Exception {
FileImageInputStream fis = null;
try {
TIFFImageReaderSpi tiffImageReaderSpi = new TIFFImageReaderSpi();
TIFFImageReader tiffImageReader = new TIFFImageReader(tiffImageReaderSpi);
fis = new FileImageInputStream(fTiff);
tiffImageReader.setInput(fis);
BufferedImage bi = tiffImageReader.read(0);
ImageIO.write(bi,"jpg",new File(sendPath));
} catch (Exception e) {
throw new IOException("TIF转JPG失败!"+e);
} finally {
if (fis != null) {
try {
fis.flush();
fis.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
}
4.最后记得配置映射器（我是用的若依不分离版本的框架，如果使用的是前后端分离的，记得在negix里面配置映射路径）
package com.ruoyi.web.core.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@Configuration
public class ImgPathConfig extends WebMvcConfigurerAdapter {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
//addResourceHandler是指定的虚拟路径，addResourceLocations是自己的物理路径，
registry.addResourceHandler("/localImgPath/**").addResourceLocations("file:/D:/upload/");
registry.addResourceHandler("/localTifImgPath/**").addResourceLocations("file:/D:/uploadTif/");
super.addResourceHandlers(registry);
}
}
前段：
前台的图片展示，由于暂时未找到该插件自带的缩放和旋转功能，只能自己实现了
我在此基础上更改了一下
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<th:block th:include="include :: header('需求列表')"/>
</head>
<body class="gray-bg">
<div class="container-div">
<div class="row">
</div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
var prefix = ctx + "system/info";
$(function () {
var options = {
url: prefix + "/list",
onClickRow: onClickRow, //此处为单击行调用的方法
onLoadSuccess: onLoadSuccess,
columns: [{
checkbox: true
},
{
field: 'id',
title: '',
visible: false
},
{
class: 'W80',
field: 'imgPath',
title: '查看图片',
align: 'center',
events: viewImg,
formatter: function (value, row, index) {
if (value != null) {
return [
'<a class="searchImg">查看图片</a>',
].join('');
}
}
},
{
class: 'W50',
field: 'imgCount',
title: '图片数量',
align: 'center'
},
]
};
$.table.init(options);
});
function onClickRow(row, $element) {
$element[0].firstElementChild.firstElementChild.click();
}
function onLoadSuccess(data) {
let sumImgCount = 0;
let rows = data.rows;
for (let i = 0; i < rows.length; i++) {
sumImgCount += rows[i].imgCount;
}
$("#imgSum").html(sumImgCount)
}
window.viewImg = {
'click .searchImg': function (e, value, row, index) {
viewImgs(value);
}
};
var num = 0;
/** 展示图片*/
function viewImgs(value) {
$.modal.loading("正在加载请稍等....");
if (null == value || '' == value) {
return false;
}
$.getJSON(prefix + "/imgView?path=" + value, function (json) {
layer.photos({
photos: json,
shadeClose: false,
closeBtn: 2,
tab: function () {
$.modal.closeLoading();
/** 自定义旋转和关闭按钮*/
let str = '<button type="button" style="margin-left: 10px" class="btn btn-primary" onclick="rotateImg()">旋转</button>';
str += '<button type="button" style="margin-left: 70px" class="btn btn-warning layui-layer-close layui-layer-close2">关闭</button>';
$(".layui-layer-phimg .layui-layer-imgsee .layui-layer-imgbar .layui-layer-imgtit").append(str);
/** 去除原来的关闭按钮*/
$(".layui-layer.layui-layer-page.layui-layer-photos .layui-layer-setwin").css("display", "none");
num = 0;
/** 每次翻页都初始化*/
let layerPhotos = $(".layui-layer.layui-layer-page.layui-layer-photos #layui-layer-photos");
let phImg = $(".layui-layer.layui-layer-page.layui-layer-photos #layui-layer-photos .layui-layer-phimg");
let image = $(".layui-layer.layui-layer-page.layui-layer-photos #layui-layer-photos .layui-layer-phimg img");
phImg.css('width', layerPhotos.width())
phImg.css('height', layerPhotos.height())
image.css('width', "100%");
image.css('height', "100%");
},
anim: 0
});
});
}
function rotateImg() {
/** 先将图片外层边框大小设置为最外面边框大小，因为图片实际大小与父边框大小不一致，结果导致被裁剪了，这可能是作者没注意*/
let layerPhotos = $(".layui-layer.layui-layer-page.layui-layer-photos #layui-layer-photos");
let phImg = $(".layui-layer.layui-layer-page.layui-layer-photos #layui-layer-photos .layui-layer-phimg");
let image = $(".layui-layer.layui-layer-page.layui-layer-photos #layui-layer-photos .layui-layer-phimg img");
image.css('width', "100%");
image.css('height', "100%");
num = (num + 90) % 360;
/** 这里只旋转图片，不旋转div*/
image.css('transform', 'rotate(' + num + 'deg)');
if (num == 90 || 270 == num) {
/** 该操作只针对宽度大于高度的图片*/
if (image.width() > image.height()) {
/** 图片进行旋转时 宽度就等于外边框的高度,让图片等比例所发 */
image.css('height', phImg.height() / 1.5)
image.css('width', phImg.height())
/** 因为不知道的原因旋转后会偏移，所以需要再次计算一下*/
image.css('margin-top', (image.width() - image.height()) / 2)
}
} else {
image.css('width', phImg.width())
image.css('height', "100%")
image.css('margin-top', '0px');
}
changeImgSize(layerPhotos, phImg);
}
/** 缩放*/
$(document).on("mousewheel DOMMouseScroll", ".layui-layer-phimg", function (e) {
var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
(e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox
let layerPhotos = $(".layui-layer.layui-layer-page.layui-layer-photos #layui-layer-photos");
layerPhotos.css("overflow", "visible")
let phimg = $(".layui-layer.layui-layer-page.layui-layer-photos #layui-layer-photos .layui-layer-phimg");
var h = phimg.height();
var w = phimg.width();
if (delta > 0) {
h = h * 1.05;
w = w * 1.05;
} else if (delta < 0) {
if (h > 100) {
h = h * 0.95;
w = w * 0.95;
}
}
phimg.height(h);
phimg.width(w);
let img = $(".layui-layer.layui-layer-page.layui-layer-photos #layui-layer-photos .layui-layer-phimg img");
changeImgSize(layerPhotos, phimg);
img.css('width', "100%");
img.css('height', "100%");
});
/** 缩放后得重新计算一次偏移量*/
function changeImgSize(layerPhotos, val2) {
if (layerPhotos.width() > val2.width()) {
let leftSize = (layerPhotos.width() - val2.width()) / 2;
val2.css("margin-left", leftSize);
let heightSize = (layerPhotos.height() - val2.height()) / 2;
val2.css("margin-top", heightSize);
} else {
val2.css("margin-left", 0);
val2.css("margin-top", 0);
}
val2.css('position', "fixed");
}
</script>
</body>
</html>
另外还提供了下载按钮，不过我是通过更改layer.min.js实现的
效果图展示
5903
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
