ES6+Webpack+Spring boot开发高分辨率图片查看工具

1.工具介绍

大家对手机的图片查看相信一定很熟悉，可以图片放大，缩小，拖拽，旋转等操作。本工具旨在PC端也可对图片进行相似操作。其中涉及的技术点有如下

（1）ES6开发编写，webpack4打包，nodejs+npm依赖环境搭建；

（2）Spring boot开发切片服务， Maven打包部署

（3）前后端分离，webpack配置请求跨域设置

（4）图片切片金字塔缓存技术

（5）坐标实时获取和转换

（6）切片行列号，缩放级别计算

工具适配PC和移动端

2.图片查看展示技术

前端负责图片预览，使用到图片浏览开源技术openseadragon，前端部分核心代码如下：

import './css/common.css';

import Config from './src/config/Config';

import { getQueryString } from './src/util/Util';



import OpenSeadragon_DZI from './src/OpenSeadragon/DZI/OpenSeadragon_DZI';




const viewer = new OpenSeadragon_DZI({

    id: 'openSeadragon',

    loadingId: 'load',

    prefixUrl: 'images/',

    imagePath: getRequestImagePath(),

    tileServerUrl: Config.tileServerUrl,

    tileSources: Config.fileServerUrl, //必填

    // Initial rotation angle

    degrees: 0,

    // Show rotation buttons

    showRotationControl: true,

    // Enable touch rotation on tactile devices

    gestureSettingsTouch: {

        pinchRotate: true

    }

});



function getRequestImagePath() {

    const imagePath = getQueryString('fileId') ?

    Config.sourceImagesUrl + getQueryString('fileId') :

    getQueryString('imagePath');

    return imagePath;

}

 

项目源码地址：

https://github.com/yangdengxian/high-image-view

3.图片切片缓存技术

服务端负责图片切片缓存，借鉴开源技术pyramidio，部分核心代码如下：

            //解析图片
            URL url = new URL(imagePath);
//            BufferedImage img = ImageIO.read(url);
            HashMap imageResource = ImageIOUtil.read(url);
            BufferedImage img = (BufferedImage)imageResource.get("BufferedImage");
            PartialImageReader pir = new BufferedImageReader(img);
            imageFile = new File(url.getFile());
            inputFileBaseName = FilenameUtils.getBaseName(
                    imageFile.getName());

            //获取切片缓存路径
            outpath = outpath != null
                    ? outpath
                    : this.getClass().getResource(fileServerPath).getPath();
            archiver = WebFilesArchiverFactory
                    .createFromURI(outpath);

            tileSource = getTileSource(tileSource);
            tileSource.put("tileFormat",imageResource.get("formatName"));
            spb = getPyramidBuilder(tileSource);
            spb.buildPyramid(pir, inputFileBaseName, archiver, 8);

项目源码地址：

https://github.com/yangdengxian/pyramidweb

4.结束语

写作不易，望多多支持，博文属原创，坚决谢绝抄袭盗版，如需转载，请标明出处，谢谢支持！欢迎大家与我探讨！