itagger/itagger.html at master · minlux/itagger · 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html>
<head>
  <title>Itagger</title>
</head>
<body>
  <h1>Itagger</h1>
  <p>Mark the fotos to be extracted out of the image by "tagging" them in the image.<br/>
  Therefore drag your images, one after the other, into the box below.<br/>
  For each image, you can mark the fotos to be extracted with three clicks:
  <ol>
      <li>Click to the top left corner of the image.</li>
      <li>Click to the top right corner of the image.</li>
      <li>Click at any point of the bottom edge of the photo.</li>
      <li>Enter the destination file name of the selected photo into the popup dialog.</li>
  </ol>
  Repeat these steps for all photos within an image and for all images. When done, click the
  download button to get a "annotations.csv" file, that contains the data of your annotation.
  Call <code>"./extract annotations.csv"</code> to start the batch process to extract the images.
  </p>
  <button id="download" onclick="getAnnotations()">Download Annotations</button>
  <div id="drop_zone" ondrop="drag_drop(event)" ondragover="return false"
       style="width: 100%; height: 100%; border-style: solid; text-align: center; overflow: scroll">
       <canvas id="canvas">Bild hierher ziehen</canvas>
  </div>
  <script>
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    var image = new Image();
    var filepath = '';
    var filename;
    var extension;

    image.style.display="block";
    image.onload = function(e) {
      ctx.canvas.width = image.width;
      ctx.canvas.height = image.height;
      c.width = image.width;
      c.height = image.height;
      ctx.drawImage(image, 0, 0);
    };

    function drag_drop(event) {
      event.preventDefault();
      filepath = event.dataTransfer.files[0].name;
      image.src = filepath; //assignment triggers "onload" event
      let assembly = filepath.split('.');
      filename = assembly[0];
      extension = assembly[1];
    }

    var annotations = [];
    var index = 1;
    var pcnt = 0;
    var punkt = []; //Punkte A, B, C
    c.onclick = function(e) {
      //add new point
      punkt[pcnt++] = {
        x: e.offsetX,
        y: e.offsetY
      };

      //all three points A, B, C set?
      if (pcnt >= 3)
      {
        pcnt = 0;
        let label = window.prompt('Label', filename + '_' + index + '.' + extension);
        ++index;
        if (label)
        {
          //calculate vectors and their length
          let vectAB = {
            x: punkt[1].x - punkt[0].x,
            y: punkt[1].y - punkt[0].y
          };
          let lenAB = Math.sqrt(vectAB.x * vectAB.x + vectAB.y * vectAB.y); //Breite des Rechtecks
          let vectAC = {
            x: punkt[2].x - punkt[0].x,
            y: punkt[2].y - punkt[0].y
          };

          //Rotationswinkel
          let winkel = (-180 * Math.atan2(vectAB.y, vectAB.x)) / Math.PI; //Winkel im Uhrzeigersinn

          //Normalenvektor: Rechtwinklick zu AB (nach rechts), Laenge 1
          let vectNormal = {
            x: -vectAB.y / lenAB,
            y: vectAB.x / lenAB
          };

          //Lotstrecke AB | C. Dies enstrpricht der Hoehe des Rechtecks
          let lenLOT = Math.abs(vectAB.x * vectAC.y - vectAB.y * vectAC.x) / lenAB;
          let vectLOT = {
            x: Math.round(lenLOT * vectNormal.x),
            y: Math.round(lenLOT * vectNormal.y)
          };

          //Setze Punkte C, D
          punkt[2] = {
            x: punkt[1].x + vectLOT.x,
            y: punkt[1].y + vectLOT.y
          };
          punkt[3] = {
            x: punkt[0].x + vectLOT.x,
            y: punkt[0].y + vectLOT.y
          };

          //Rechteck einzeichnen
          ctx.beginPath();
          ctx.moveTo(punkt[0].x, punkt[0].y);
          ctx.lineTo(punkt[1].x, punkt[1].y);
          ctx.lineTo(punkt[2].x, punkt[2].y);
          ctx.lineTo(punkt[3].x, punkt[3].y);
          ctx.lineTo(punkt[0].x, punkt[0].y);
          ctx.stroke();
          ctx.fillText(label, punkt[0].x, punkt[0].y);

          //begrenzung berechnen
          let x0 = {
            x: Math.min(punkt[0].x, punkt[1].x, punkt[2].x, punkt[3].x),
            y: Math.min(punkt[0].y, punkt[1].y, punkt[2].y, punkt[3].y)
          };
          let w0 = Math.abs(Math.max(punkt[0].x, punkt[1].x, punkt[2].x, punkt[3].x) - x0.x);
          let h0 = Math.abs(Math.max(punkt[0].y, punkt[1].y, punkt[2].y, punkt[3].y) - x0.y);

          let annotation = [filepath, label, //source, destination
                            x0.x, x0.y, w0, h0, //bounding box: ursprung, width, height
                            punkt[0].x, punkt[0].y, Math.round(lenAB), Math.round(lenLOT), winkel.toFixed(3), //koordinaten-linke-obere-ecke, width, height, rotate
                            0]; //terminator(dummy)
          annotation = annotation.join();
          //console.log(annotation);
          annotations.push(annotation);

          //console.log('x0=' + punkt[0].x + ', y0=' + punkt[0].y);
          //console.log('alpha=' + winkel);
        }
      }
    }

    document.onkeydown = function(e) {
      if ("key" in e) {
        if(e.key == "Escape" || e.key == "Esc") {
          pcnt = 0
        }
      }
    };


    function getAnnotations() {
      let csvContent = "data:text/csv;charset=utf-8,";
      annotations.forEach(function(row){
        csvContent += row + "\r\n"; // add carriage return
      });

//   var encodedUri = encodeURI(csvContent);
//   window.open(encodedUri, "annotations.csv");
      let encodedUri = encodeURI(csvContent);
      let link = document.createElement("a");
      link.setAttribute("href", encodedUri);
      link.setAttribute("download", "annotations.csv");
      link.click();
    }
  </script>

</body>
</html>