How to run V3 in pure HTML and Javascript #450

dennys · 2024-10-16T09:26:40Z

dennys
Oct 16, 2024

I use Django and want to embed annotorious, but the document seems for

<link rel="stylesheet" href="/static/annotorious/annotorious.min.css">
<script src="/static/annotorious/annotorious.min.js"></script>
<script>
import { createImageAnnotator } from '@annotorious/annotorious';
const anno = createImageAnnotator('sample-image');
</script>

But get the error
Uncaught TypeError: Failed to resolve module specifier "@annotorious/annotorious". Relative references must start with either "/", "./", or "../"

And I try to use this command, it works, I can annotate, but the image is not showed.

<img src="/static/image/tool1.png" id="my-image"/>
<script type="module">
var anno = Annotorious.createImageAnnotator('my-image');
</script>

Is there a document to illustrate how to embed annotorious into HTML based page ?

rsimon · 2024-10-16T09:30:04Z

rsimon
Oct 16, 2024
Maintainer

Hi,

see here: https://annotorious.dev/guides/annotating-images/#script-import

<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@annotorious/annotorious@latest/dist/annotorious.css">
    <script src="https://cdn.jsdelivr.net/npm/@annotorious/annotorious@latest/dist/annotorious.js"></script>
  </head>
  <body>
    <img id="my-image" src="my-image.jpg" />

    <script>
      window.onload = function() {
        var anno = Annotorious.createImageAnnotator('my-image');
      }
    </script>
  </body>
</html>

0 replies

dennys · 2024-10-16T13:22:29Z

dennys
Oct 16, 2024
Author

It works, thanks.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Annotorious

How to run V3 in pure HTML and Javascript #450

{{title}}

Replies: 2 comments

{{title}}

{{title}}

Select a reply

Annotorious

How to run V3 in pure HTML and Javascript #450

dennys Oct 16, 2024

Replies: 2 comments

rsimon Oct 16, 2024 Maintainer

dennys Oct 16, 2024 Author

dennys
Oct 16, 2024

rsimon
Oct 16, 2024
Maintainer

dennys
Oct 16, 2024
Author