openseadragon.js与deep zoom java实现艺术品图片展示

     openseadragon.js 是一款用来做图像缩放的插件，它可以用来做图片展示，做展示的插件很多，也很优秀，但大多数都解决不了图片尺寸过大的问题。

     艺术品图像展示就是最简单的例子，展示此类图片一般要求比较精细，所以图片尺寸很大，如果按照普通的方式直接将整个图片加载，要耗费巨大的带宽。

     openseadragon.js 即为此而生，它展示的图像，必须经过切割处理，当放大图像时，才去加载更大的尺寸，真正做到了按需加载。

     值得一提的是，openseadragon.js是微软公司的一款开源产品，非常难得。

     openseadragon.js用法很简单。

定义html容器

<div id="container" style=" 100%; height: 600px;"></div>

初始化openseadragon.js

(function(win){
    var viewer = OpenSeadragon({
        // debugMode: true,
        id: "container",  //容器id
        prefixUrl: "./lib/openseadragon/images/", //openseadragon插件资源路径
        tileSources: "./image/earth.xml",  //openseadragon 图片资源xml
        showNavigator:true  //是否显示控制按钮
    });
    console.log(viewer);
})(window);

效果图

 

      对，你没有看错，使用openseadragon.js，只需要copy一段初始化代码，初始化代码格式基本固定，只有tileSources是需要变化的，想显示哪个图，就写哪个图的xml链接。

      那么这个xml是个什么东西呢？这是微软定义的一套Deep Zoom技术，或者叫规范，通过图像分割，然后配上一个xml文件，即可按照用户缩放的尺寸，按需加载图像，直到最清晰为止。这本来是微软Silverlight里的技术，它的JavaScript实现就是openseadragon.js。

     笔者从google code上找到了一份java程序，专门用来生成Deep Zoom。笔者在原作基础上做了一些小小的改进，原作有些错误。。。

Deep Zoom For Java

import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.channels.FileChannel;
import javax.imageio.ImageIO;

/**
 * Deep Zoom Converter
 * 
 * @author 杨元
 *
 */
public class DeepZoomUtil {
    static final String xmlHeader = "<?xml version="1.0" encoding="utf-8"?>";
    static final String schemaName = "http://schemas.microsoft.com/deepzoom/2009";

    static Boolean deleteExisting = true;
    static String tileFormat = "jpg";

    // settings
    static int tileSize = 256;
    static int tileOverlap = 1;
    static Boolean verboseMode = false;
    static Boolean debugMode = false;

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
      
        try {
            processImageFile(new File("d:/earth.jpg"), new File("d:/earth"));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * Process the given image file, producing its Deep Zoom output files
     * in a subdirectory of the given output directory.
     * @param inFile the file containing the image
     * @param outputDir the output directory
     */
    private static void processImageFile(File inFile, File outputDir) throws IOException {
        if (verboseMode)
             System.out.printf("Processing image file: %s
", inFile);

        String fileName = inFile.getName();
        String nameWithoutExtension = fileName.substring(0, fileName.lastIndexOf('.'));
        String pathWithoutExtension = outputDir + File.separator + nameWithoutExtension;

        BufferedImage image = loadImage(inFile);

        int originalWidth = image.getWidth();
        int originalHeight = image.getHeight();

        double maxDim = Math.max(originalWidth, originalHeight);

        int nLevels = (int)Math.ceil(Math.log(maxDim) / Math.log(2));

        if (debugMode)
            System.out.printf("nLevels=%d
", nLevels);

        // Delete any existing output files and folders for this image

        File descriptor = new File(pathWithoutExtension + ".xml");
        if (descriptor.exists()) {
            if (deleteExisting)
                deleteFile(descriptor);
            else
                throw new IOException("File already exists in output dir: " + descriptor);
        }

        File imgDir = new File(pathWithoutExtension);
        if (imgDir.exists()) {
            if (deleteExisting) {
                if (debugMode)
                    System.out.printf("Deleting directory: %s
", imgDir);
                deleteDir(imgDir);
            } else
                throw new IOException("Image directory already exists in output dir: " + imgDir);
        }

        imgDir = createDir(outputDir, nameWithoutExtension.concat("_files"));

        double width = originalWidth;
        double height = originalHeight;

        for (int level = nLevels; level >= 0; level--) {
            int nCols = (int)Math.ceil(width / tileSize);
            int nRows = (int)Math.ceil(height / tileSize);
            if (debugMode)
                System.out.printf("level=%d w/h=%f/%f cols/rows=%d/%d
",
                                   level, width, height, nCols, nRows);
            
            File dir = createDir(imgDir, Integer.toString(level));
            for (int col = 0; col < nCols; col++) {
                for (int row = 0; row < nRows; row++) {
                    BufferedImage tile = getTile(image, row, col);
                    saveImage(tile, dir + File.separator + col + '_' + row);
                }
            }

            // Scale down image for next level
            width = Math.ceil(width / 2);
            height = Math.ceil(height / 2);
            if (width > 10 && height > 10) {
                // resize in stages to improve quality
                image = resizeImage(image, width * 1.66, height * 1.66);
                image = resizeImage(image, width * 1.33, height * 1.33);
            }
            image = resizeImage(image, width, height);
        }

        saveImageDescriptor(originalWidth, originalHeight, descriptor);
    }


    /**
     * Delete a file
     * @param path the path of the directory to be deleted
     */
    private static void deleteFile(File file) throws IOException {
         if (!file.delete())
             throw new IOException("Failed to delete file: " + file);
    }

    /**
     * Recursively deletes a directory
     * @param path the path of the directory to be deleted
     */
    private static void deleteDir(File dir) throws IOException {
        if (!dir.isDirectory())
            deleteFile(dir);
        else {
            for (File file : dir.listFiles()) {
               if (file.isDirectory())
                   deleteDir(file);
               else
                   deleteFile(file);
            }
            if (!dir.delete())
                throw new IOException("Failed to delete directory: " + dir);
        }
    }

    /**
     * Creates a directory
     * @param parent the parent directory for the new directory
     * @param name the new directory name
     */
    private static File createDir(File parent, String name) throws IOException {
        assert(parent.isDirectory());
        File result = new File(parent + File.separator + name);
        if (!result.mkdir())
           throw new IOException("Unable to create directory: " + result);
        return result;
    }

    /**
     * Loads image from file
     * @param file the file containing the image
     */
    private static BufferedImage loadImage(File file) throws IOException {
        BufferedImage result = null;
        try {
            result = ImageIO.read(file);
        } catch (Exception e) {
            throw new IOException("Cannot read image file: " + file);
        }
        return result;
    }

    /**
     * Gets an image containing the tile at the given row and column
     * for the given image.
     * @param img - the input image from whihc the tile is taken
     * @param row - the tile's row (i.e. y) index
     * @param col - the tile's column (i.e. x) index
     */
    private static BufferedImage getTile(BufferedImage img, int row, int col) {
        int x = col * tileSize - (col == 0 ? 0 : tileOverlap);
        int y = row * tileSize - (row == 0 ? 0 : tileOverlap);
        int w = tileSize + (col == 0 ? 1 : 2) * tileOverlap;
        int h = tileSize + (row == 0 ? 1 : 2) * tileOverlap;

        if (x + w > img.getWidth())
            w = img.getWidth() - x;
        if (y + h > img.getHeight())
            h = img.getHeight() - y;

        if (debugMode)
            System.out.printf("getTile: row=%d, col=%d, x=%d, y=%d, w=%d, h=%d
",
                              row, col, x, y, w, h);
        
        assert(w > 0);
        assert(h > 0);

        BufferedImage result = new BufferedImage(w, h, img.getType());
        Graphics2D g = result.createGraphics();
        g.drawImage(img, 0, 0, w, h, x, y, x+w, y+h, null);

        return result;
    }

    /**
     * Returns resized image
     * NB - useful reference on high quality image resizing can be found here:
     *   http://today.java.net/pub/a/today/2007/04/03/perils-of-image-getscaledinstance.html
     * @param width the required width
     * @param height the frequired height
     * @param img the image to be resized
     */
    private static BufferedImage resizeImage(BufferedImage img, double width, double height) {
        int w = (int)width;
        int h = (int)height;
        BufferedImage result = new BufferedImage(w, h, img.getType());
        Graphics2D g = result.createGraphics();
        g.setRenderingHint(RenderingHints.KEY_INTERPOLATION,
                           RenderingHints.VALUE_INTERPOLATION_BICUBIC);
        g.drawImage(img, 0, 0, w, h, 0, 0, img.getWidth(), img.getHeight(), null);
        return result;
    }

    /**
     * Saves image to the given file
     * @param img the image to be saved
     * @param path the path of the file to which it is saved (less the extension)
     */
    private static void saveImage(BufferedImage img, String path) throws IOException {
        File outputFile = new File(path + "." + tileFormat);
        try {
            ImageIO.write(img, tileFormat, outputFile);
        } catch (IOException e) {
            throw new IOException("Unable to save image file: " + outputFile);
        }
    }

    /**
     * Write image descriptor XML file
     * @param width image width
     * @param height image height
     * @param file the file to which it is saved
     */
    private static void saveImageDescriptor(int width, int height, File file) throws IOException {
        StringBuilder sb = new StringBuilder(256);
        sb.append(xmlHeader);
        sb.append("<Image TileSize="");
        sb.append(tileSize);
        sb.append("" Overlap="");
        sb.append(tileOverlap);
        sb.append("" Format="");
        sb.append(tileFormat);
        sb.append("" ServerFormat="Default" xmlns="");
        sb.append(schemaName);
        sb.append("">");
        sb.append("<Size Width="");
        sb.append(width);
        sb.append("" Height="");
        sb.append(height);
        sb.append("" />");
        sb.append("</Image>");
        saveText(sb.toString().getBytes("UTF-8"), file);
    }

    /**
     * Saves strings as text to the given file
     * @param bytes the image to be saved
     * @param file the file to which it is saved
     */
    private static void saveText(byte[] bytes, File file) throws IOException {
        try {
            //输出流
            FileOutputStream fos = new FileOutputStream(file);
            //从输出流中创建写通道
            FileChannel writeChannel = fos.getChannel();
            //将既有数组作为buffer内存空间
            ByteBuffer byteBuffer = ByteBuffer.wrap(bytes);
            //将buffer写到磁盘
            writeChannel.write(byteBuffer);
            
            writeChannel.close();
        } catch (IOException e) {
            throw new IOException("Unable to write to text file: " + file);
        }
    }
}

     调用非常简单，只有一句话：processImageFile(new File("d:/earth.jpg"), new File("d:/earth"));，第一个参数是图片路径，第二个参数是生成的Deep Zoom保存路径。本例将会在d:/earth目录下生成一个earth.xml文件和一个earth_files文件夹，xml的文件名默认和图片的文件名一致，然后直接把earth.xml的url返回给前端的openseadragon.js，就可以实现图像缩放。

     需要注意的是，*_files文件夹必须和xml文件在同一目录，并且*要和xml文件名保持一致。

     想要预览openseadragon.js效果，必须在真实的http容器中，不可以直接在文件中打开。

     打包的openseadragon.js笔者做了一些UI上的美化，个人觉得漂亮些，如果读者不喜欢，可以用包里的原版。

openseadragon.js 世界地图案例

openseadragon.js+java源码打包下载