文章/答案/技术大牛

发布

社区首页 >问答首页 >无法使MiradorImageTools插件工作

问无法使MiradorImageTools插件工作
EN

Stack Overflow用户

提问于 2021-01-30 07:17:06

回答 1查看 66关注 0票数 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。

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

html

plugins

iiif

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-02-03 04:33:13

要使用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,
]);

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65962990

复制

相似问题

问无法使MiradorImageTools插件工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法使MiradorImageTools插件工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法使MiradorImageTools插件工作
EN