image-annotate/index.html at main · Dinika/image-annotate · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link href=" https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css " rel="stylesheet">
  <link rel="stylesheet" href="/src/styles.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://kit.fontawesome.com/6cb364fa82.js" crossorigin="anonymous"></script>
  <title>Image Annotate</title>
</head>

<body>
  <div class="container">
    <div class="file_upload_container">
      <label for="file-uploader" class="btn">Import Image</label>
      <input id="file-uploader" type="file" accept="image/jpeg, image/png, image/jpg" onchange="onImageUpload(event)">
    </div>

    <canvas id="drawPlace" width="300" height="300"></canvas>
    <!-- The temporary-canvas is used to allow erasable drawing -->
    <canvas id="temporary-canvas" width=300 height=300></canvas>

    <footer class="toolbar" role="toolbar" aria-label="Image Formatting">

      <button type="button" onclick="onDrawClick()" class="toolbar-action" aria-pressed="false" title="Draw on Image">
        <i class="fa-solid fa-pencil fa-lg"></i>
        <span>Doodle</span>
      </button>

      <button type="button" onclick="onRectangleClick()" class="toolbar-action rectangle" aria-pressed="false"
        title="Rectangle">
        <div class="rectangle-icon"></div>
        <span>Rectangle</span>
      </button>

      <button type="button" onclick="onImageDownload()" class="toolbar-action download" aria-pressed="false"
        title="Save Image">
        <span class="icon-container">
          <svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
            <path
              d="m 8 0 c -0.550781 0 -1 0.449219 -1 1 v 8.585938 l -2.292969 -2.292969 c -0.1875 -0.1875 -0.441406 -0.292969 -0.707031 -0.292969 s -0.519531 0.105469 -0.707031 0.292969 c -0.390625 0.390625 -0.390625 1.023437 0 1.414062 l 4 4 c 0.390625 0.390625 1.023437 0.390625 1.414062 0 l 4 -4 c 0.390625 -0.390625 0.390625 -1.023437 0 -1.414062 s -1.023437 -0.390625 -1.414062 0 l -2.292969 2.292969 v -8.585938 c 0 -0.550781 -0.449219 -1 -1 -1 z m -6 14 v 2 h 12 v -2 z m 0 0" />
          </svg>
        </span>
        <span>Save Image</span>
      </button>

      <button type="button" onclick="onClearDrawingClick()" class="toolbar-action" aria-pressed="false"
        title="Clear Drawing">
        <i class="fa-solid fa-xmark fa-xl"></i>
        <span>Clear Image</span>
      </button>

    </footer>
  </div>

  <script type="module" src="./src/drawing.js" defer></script>
  <script type="module" src="./src/image.js" defer></script>


  <script type="module">
    import { onDrawClick, onClearDrawingClick, onRectangleClick, removeDrawingListeners } from "./src/drawing.js";
    import { onImageUpload, onImageDownload } from "./src/image.js";

    window.onDrawClick = onDrawClick;
    window.onRectangleClick = onRectangleClick;
    window.onClearDrawingClick = onClearDrawingClick;
    window.removeDrawingListeners = removeDrawingListeners;

    window.onImageUpload = (event) => {
      removeDrawingListeners();
       onImageUpload(event)
    };

    window.onImageDownload = (event) => {
      removeDrawingListeners();
      onImageDownload(event);
   };

  </script>

</body>

</html>