0

我正在尝试让MiradorImageTools插件与 mirador 图像查看器一起使用。

我正在使用一个非常基本的 html 页面进行测试：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mirador-Test</title>
</head>

<body>
  <h1>Title</h1>
  <div>
    <p>blah</p>
    <div id="my-mirador" />

    <script src="https://unpkg.com/mirador@latest/dist/mirador.min.js"></script>
    <script src="https://unpkg.com/mirador-image-tools@0.10.0/umd/mirador-image-tools.min.js"></script>

    <script type="text/javascript">
      const config = {
        "id": "my-mirador",
        "manifests": {
          "https://iiif.lib.harvard.edu/manifests/drs:48309543": {
            "provider": "Harvard University"
          }
        },
        "windows": [
          {
            "imageToolsEnabled": "true",
            "manifestId": "https://iiif.lib.harvard.edu/manifests/drs:48309543",
          }
        ]
      };

      // var mirador = Mirador.viewer(config);
      var mirador = Mirador.viewer(config, [MiradorImageTools]);  // <-- Error!

    </script>
  </div>
</body>

</html>

这给了我以下错误：

Uncaught ReferenceError: MiradorImageTools is not defined
    <anonymous> ./test3.html:36
test3.html:36:45

如果我将插件排除在外，用上面的注释行替换有问题的行，那么整个事情都会正常工作，我会得到 mirador 应有的显示。

很明显我引用的插件是错误的。但是正确的方法是什么？

4

1 回答 1

0

要使用 MiradorImageTools 和任何其他 Mirador 插件（自 v3.0.0 起），您需要导入包并使用Webpack或parcel等工具创建项目的构建。

可以在此处查看此类设置的示例：https ://github.com/projectmirador/mirador-integration ，其中包括使用 Webpack 和 parcel 的示例。

./src/index.js
import Mirador from 'mirador/dist/es/src/index';
import { miradorImageToolsPlugin } from 'mirador-image-tools';

const config = {
  id: 'demo',
  windows: [{
    imageToolsEnabled: true,
    imageToolsOpen: true,
    manifestId: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest',
  }],
  theme: {
    palette: {
      primary: {
        main: '#1967d2',
      },
    },
  },
};

Mirador.viewer(config, [
  ...miradorImageToolsPlugin,
]);

有关如何为特定工具构建的更多信息，请参阅那里的自述文件。

于 2021-02-02T20:33:13.417 回答