openseadragon.js 是一款用来做图像缩放的插件，它可以用来做图片展示，做展示的插件很多，也很优秀，但大多数都解决不了图片尺寸过大的问题。
艺术品图像展示就是最简单的例子，展示此类图片一般要求比较精细，所以图片尺寸很大，如果按照普通的方式直接将整个图片加载，要耗费巨大的带宽。
openseadragon.js 即为此而生，它展示的图像，必须经过切割处理，当放大图像时，才去加载更大的尺寸，真正做到了按需加载。
值得一提的是，openseadragon.js是微软公司的一款开源产品，非常难得。
openseadragon.js用法很简单。
定义html容器
<div id="container" style="width: 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\n", 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\n", 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\n", 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\n",
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\n",
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上的美化，个人觉得漂亮些，如果读者不喜欢，可以用包里的原版。