IIIF图像互操作框架接口实践

sytmrrow

已于 2024-07-19 10:16:03 修改

阅读量1.1k

点赞数 29

文章标签：图像处理

于 2024-07-19 10:12:36 首次发布

本文链接：https://blog.csdn.net/islandfff7/article/details/140471896

版权

IIIF图像互操作框架实践

一、Image API介绍
二、Presentation API介绍
三、mirador
四、总结

国际图像互操作框架（IIIF）是一组围绕媒体共享和复用的API标准。具体更细致的介绍可见：https://github.com/IIIF/awesome-iiif。
此博客仅针对个人在数字人文工坊中学习实践的内容进行总结，主要偏重针对image API和presentation API的学习与总结，如存在错误与不足，欢迎指出！

一、Image API介绍

Image API——用于从世界各地获取图像、进行复用，允许用户选择图像的某个区域并调整大小、旋转和编辑。
具体说明文档可见：https://iiif.io/api/image/3.0/

（一）图像服务器

cantaloupe——用Java编写的图像服务器，支持3.0及其之前的所有IIIF图像API版本。

1.安装前提

由于cantaloupe是用java编写的图像服务器，因此在安装运行cantaloupe前，需确保本机拥有Java环境。

如何查看是否拥有java环境？
快捷键win+r，输入cmd打开终端，输入java --version,输出如下结果则说明系统拥有java环境且配置正确。
在这里插入图片描述
如果出现其他返回结果，则根据具体情况予以解决。
jdk下载安装及环境配置教程可见该博客：https://blog.csdn.net/ACE_U_005A/article/details/114840497

2.cantaloupe安装

cantaloupe下载安装详细教程可见：cantaloupe开始使用

（1）下载并解压cantaloupe文件

在该网页中下载cantaloupe文件：https://cantaloupe-project.github.io/
在这里插入图片描述
文件下载后，在本机目录下解压，文件目录如下。
解压后文件夹内容

（2）修改配置

配置图像服务器的源图像存放地址。

（3）运行cantaloupe

在cantaloupe的路径下运行java -Dcantaloupe.config=cantaloupe.properties -Xmx2g -jar cantaloupe-5.0.6.jar
在这里插入图片描述

（4）测试

在前面配置的的源图像存放地址中添加jpg文件/文件夹。
在源图像存放文件夹中添加jpg文件/文件夹

打开浏览器，输入localhost:8182/iiif/3/test.jpg
1描述

查看完整图片,浏览器输入localhost:8182/iiif/3/test.jpg/full/400,/0/default.jpg

查看文件夹中的图像，如果源图像文件夹下还有子文件夹，对于子文件夹，需要用%2f作为转义字符代替/，如子文件夹名为yongle，则访问其中的图片文件test1.jpg需在浏览器输入：http://localhost:8182/iiif/3/yongle%2ftest1.jpg

如果文件路径为：源图片文件夹/子文件夹1/子文件夹2/图片1
则在浏览器中应输入http://localhost:8182/iiif/3/子文件夹1%2f子文件夹2%2f图片1
这个URL（网址）就是图像在cantaloupe服务器中的可访问路径。

（二）图片查看器

这里我们使用OpenSeadragon作为图像查看器。
OpenSeadragon安装方式详见：OpenSeadragon下载并安装

1.安装OpenSeadragon

下载zip文件并解压。
解压结果i

2.使用OpenSeadargon查看单张照片

浏览器中输入https://iiif.gdmrdigital.com/openseadragon/index.html?image=http://localhost:8182/iiif/3/test2.jpg/info.json，其中http://localhost:8182/iiif/3/test2.jpg/info.json为图像服务器中文件可访问地址。
查看单张图片

3.查看多张图片

保存后直接打开OpenSeadragon文件夹的osmulti.html文件，即可查看多张照片。
查看多张图片
此处的介绍较为基础，如有需要可查看该博客进行OpenSeadragon的学习：https://blog.csdn.net/qq_30014557/article/details/123467521

二、Presentation API介绍

Presentation API——将每个图像及其元数据打包在一起，以便用户知道图像的来源、标题、甚至图像来自哪本书的哪一页，同时也是一个重要的展示工具，可以与图像API结合使用。
具体说明文档可见：https://iiif.io/api/presentation/3.0/。

（一）基本架构

规范类型定义

（二）manifest工具使用

可直接打开网址，使用manifest工具构建mainfest用于后续展示：https://manifest-editor-site.netlify.app/

1.使用manifest editor生成manifest文件

新建manifest
1.为manifest命名

2.查看Canvas

3.新增Canvas

4.发现有多种可添加的内容，这里以图片为例。

5.此处的完整图像url与前文cantaloupe查看完整图像的url相同

6.点击“Create”后创建canvas。
可同时创建多个canvas。
创建并修改canvas信息

7.预览

预览2

8.下载即可获得manifest.json文件

2.生成manifest.json文件的另一种方式

manifest.json文件归根到底只是一个符合IIIF presentation API规范的json文件，实际上这个文件可以通过直接撰写json文件获得。
然而针对大批量的图像的组织呈现，无论是通过manifest editor网页进行图形化编辑与上传，还是逐行撰写代码获得manifest.json文件，这都是一件非常耗时且重复度很高的工作。
这里可以考虑使用Python撰写程序进行图片的批量组织与导入。
示例代码如下：（这个示例代码可能不具备普适性，仅仅只是展示存在使用Python等程序生成manifest.json文件的方法，具体如何撰写Python脚本取决于实际的图片展示需求）

pip install iiif-prezi3 -i https://mirrors.aliyun.com/pypi/simple/ #下载iiif相关库
#导入所需包
import iiif_prezi3
import random
import string
import os
from PIL import Image
def generate_iif_manifest(num_pages=65, base_url=r'D:\24lesson\imageExchage\tempfile\final', output_file='prezi.json', page_number_width=2, server_url='http://localhost:8000'):
    
    random_manifest = ''.join(random.choice(string.ascii_letters + string.digits) for _ in range(20))
    amanifest = iiif_prezi3.Manifest(id=f'https://media.getty.edu/iiif/manifest/94225c7e-8345-4c0d-aaf5-375ddb853134/{random_manifest}', label={'en': ['永乐大典7677']})

    canvases = []
    for a in range(num_pages):
        #add 0 to the beginning of string
        i = str(a).rjust(page_number_width, '0')
        img_path = os.path.join(base_url, f'永乐大典.卷7677.庚字.明嘉靖隆庆间内府重写本_{i}.jpg') #由于示例数据中的图片名称具有固定的格式，因此这里可以直接通过base_url+图片文件名的方式批量获得图片路径
        # Open image to get width and height (assuming Pillow is available)
        with Image.open(img_path) as img:
            width, height = img.size
        
        canvasid = f'http://iiif.example.org/{random_manifest}/canvas/{i}'
        acanvas = iiif_prezi3.Canvas(id=canvasid, width=width, height=height, label={'en' : [f'page{i}']})
        
        annotation_id = canvasid + '/annotation/0'
        # Assuming you have an HTTP server serving files from `base_url`
        image_id = f'{server_url}/{os.path.basename(img_path)}'
        
        anannotation = iiif_prezi3.Annotation(
            type="Annotation",
            id=annotation_id,
            target=canvasid,
            motivation='painting',
            body=iiif_prezi3.ResourceItem(
                format='image/jpeg',
                width=width,
                height=height,
                id=image_id,
                type='Image'
            )
        )
        
        anannotationpage = iiif_prezi3.AnnotationPage(id=canvasid + '/annotationpage/0', type='AnnotationPage')
        anannotationpage.items = [anannotation]
        acanvas.items = [anannotationpage]
        canvases.append(acanvas)
    
    amanifest.items = canvases
    # 输出json文件
    file_path = os.path.join(base_url, output_file)
    with open(file_path, 'w', encoding='utf-8') as file:
        file.write(amanifest.json(indent=2))
        print(f"文件'{file_path}'保存成功！")
    
    return amanifest.json(indent=2)

# 调用函数
generate_iif_manifest()

三、mirador

mirador是一个开源的、基于Web的项目，旨在提供一个强大且灵活的平台，用于比较和查看多个数字图像资源。可以通过mirador阅读各种iiif文件，包括服务器中的manifest文件。可通过该链接进行访问：mirador
开源项目源代码：https://gitee.com/mirrors/Mirador

（一）通过mirador查看网络中的iiif图像

1.找到一张iiif图像

可以考虑在各大博物馆官网或其他提供iiif图像的网站获取iiif图像URL。
这里以Getty网站为例。

选择一张图片，获取其iiif图像URL
getty页面

选择图片并点击：
在这里插入图片描述

2.打开mirador

可以打开mirador官方的测试网址，也可以考虑打开服务器中的mirador（如果有）
添加图片
添加新图片

添加成功

点击即可直接查看图片
查看大图

（二）查看本机创建的manifest文件

mirador可以理解成一个manifest文件的阅读工具，如果想要利用mirador访问阅读本地的manifest文件，首先需要让mirador可以找到并获取该文件，因此这里我们使用nginx服务器进行代理。
（实际上这里不使用nginx也是可以的，只需要满足让mirador.html找到manifest文件的条件即可）

1.配置nginx

（1）下载nginx

在该网址处下载nginx
https://nginx.org/en/download.html
根据自己所需的版本下载压缩包后解压文件。

（2）修改监听端口与配置（不进行这一步骤也可以）

正常下载解压后文件目录如下。
正常下载解压后目录
1.双击nginx.exe即可启动nginx。
浏览器输入：localhost:80，回车，浏览器呈现结果如下。
nginx正常启动

2.修改配置文件，打开conf文件夹。

3.打开“nginx.conf”文件（可以直接用记事本打开）
打开nginx.conf
4.可以考虑将nginx的监听端口与代理路径修改成希望的端口和路径（不修改也可以）
nginx.conf文件
如果选择修改端口与代理路径，那么在浏览器访问时应该要使用相应的端口，例如，如果将监听端口修改为8081，那么在使用nginx代理时需要在浏览器输入localhost:8081。
同时，如果修改了代理路径，则需要将想让nginx访问到的文件，放在对应的代理文件夹里。

2.使用nginx中的mirador，访问本地服务器中的manifest文件

（1）在本地服务器中放置所需文件

将mirador.html文件与manifest文件放在nginx代理路径中。
将所需文件放在对应的路径中
如果想要进行mirador的集成开发可见该网址：https://github.com/ProjectMirador/mirador
由于此处仅仅是利用mirador进行图像阅读，不涉及太多对mirador本身的操作，因此这里直接利用mirador.html进行阅读即可。
mirador.html文件源码如下：

<html>
<script src="https://unpkg.com/mirador@latest/dist/mirador.min.js"></script>
<!-- By default uses Roboto font. Be sure to load this or change the font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<!-- Container element of Mirador whose id should be passed to the instantiating call as "id" -->

<body>
<div id="mirador"/> 

<script type="text/javascript">
var miradorInstance = Mirador.viewer({
       id: 'mirador',
       theme: {
         transitions: window.location.port === '4488' ?  { create: () => 'none' } : {},
       },
       windows: [
       {
         manifestId: 'http://miss.newwenke.com/sas/manifest/fowlckaszutev2cnmxz7yfjzzspgqem8.json',
       }],
       catalog: [
         { manifestId: 'http://miss.newwenke.com/sas/manifest/fowlckaszutev2cnmxz7yfjzzspgqem8.json' },
         { manifestId: 'http://miss.newwenke.com/sas/manifest/ppapbg7qmr5sfsiyfxv4wb1qzh71b7g7.json' },
         { manifestId: 'http://miss.newwenke.com/sas/manifest/aj12qh4vggtviyueb26kxcjgmcq4sr4z.json' },
         { manifestId: 'http://miss.newwenke.com/sas/manifest/ksmjrz2m37owmkmoj8plat2qira3h2ko.json' }
       ]
     });
</script>
</body>
</html>

（其中的几个manifest文件的id是自行添加的）

（2）通过nginx访问本地服务器中的mirador.html

在浏览器中输入localhost:80/mirador.html（如果修改了端口，则用修改的端口代替默认端口80）即可访问本地服务器路径中的mirador.html文件。
通过nginx访问mirador

（3）使用mirador访问本地服务器的manifest.json文件

点击左上角的蓝色+号后点击右下角的“add source”。
输入http://localhost:80/manifest.json（这里的80为端口，manifest.json为manifest文件名）
点击add添加，即可在本地的mirador阅读器中阅读manifest文件。
添加本地文件

四、总结

这里的总结借用“数字人文工坊”培训中陈老师ppt中的图像，将前面我们掌握的所有模块组装在一起。
首先，我们将图像上传到图像服务器cantaloupe中，此时，图像有了URL地址，OpenSeadragon是一个便捷的图像查看工具。
在拥有图像的URL地址后，可以将图像组织成manifest.json文件以更好地展示图像，manifest文件可以使用manifest editor或者编写程序两种方式生成。mirador作为一个较为成熟的manifest文件阅读工具，需要使用URL进行找到manifest文件才能够进行阅读，因此我们使用nginx作为服务器代理以实现这一目的。

经过以上的操作，我们已经初步了解了IIIF图像互操作框架的Image API与Presentation API的相关操作，实际上，这里我们所进行的操作仍然是较为基础的练习，但不积跬步，无以至千里，或许这是一颗珍珠！

sytmrrow

关注

29
点赞
踩
15

收藏

觉得还不错? 一键收藏
2
评论
IIIF图像互操作框架接口实践

简要介绍了IIIF图像互操作框架中Image API与Presentation API的基本操作，包括cantaloupe图像服务器、OpenSeadragon图像阅读器、manifest、Mirador等。
复制链接

扫一扫