layer.photos 查看本地图片，并实现缩放和旋转功能

坐在门前吸烟看雨落

已于 2023-02-09 19:09:27 修改

阅读量4.8k

点赞数 1

分类专栏：前端 java 文章标签： javascript ui

于 2022-03-27 01:19:44 首次发布

本文链接：https://blog.csdn.net/Yxh_255/article/details/123767354

版权

java 同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

公司用了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);

    }
}

前段：

前台的图片展示，由于暂时未找到该插件自带的缩放和旋转功能，只能自己实现了

功能实现参考了这位大佬的博客 layer.photos放大缩小以及旋转_qq_35031260的博客-CSDN博客_layer.photos放大layer.photos放大缩小以及旋转由于在网上搜到的旋转都多少有些问题，要么是旋转后图片转底层的背景大小不改变导致图片展示不全，要么是连背景一起旋转用起来很不方便，所以我把他调整成了旋转图片并且根据图片旋转后的长宽调整背景层的长宽。事先准备替换layer.js中最后一行的contentcontent: '<input type="hidden" id="current"><div class="layui-layer-phimg"><img id="imglayerhttps://blog.csdn.net/qq_35031260/article/details/118786216

我在此基础上更改了一下

<!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实现的