artridge.ch/pico8ImageToText.html at master · Redd87/artridge.ch · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <img src="" alt="" style="image-rendering: pixelated;">
    <canvas width="94" height="62"></canvas>

    <script>

      const width = 94;
      const height = 62;
      const canvas = document.querySelector('canvas');
      const ctx = canvas.getContext('2d');
      const img = document.querySelector('img');

      const colors = [
        [0,0,0],
        [29,43,83],
        [126, 37, 83],
        [0, 135, 81],
        [171, 82, 54],
        [95, 87, 79],
        [194, 195, 199],
        [255, 241, 232],
        [255, 0, 77],
        [255, 163, 0],
        [255, 236, 39],
        [0, 228, 54],
        [41, 173, 255],
        [131, 118, 156],
        [255, 119, 168],
        [255, 204, 170]
      ]

      img.addEventListener('load', _ => {
        ctx.drawImage(img, 0, 0);
        let finalString = ''

        const pixels = ctx.getImageData(0, 0, 94, 62);
        for (let i = 0; i < pixels.data.length; i+=4) {
          let found = false;
          for (let j = 0; j < colors.length; j++) {
            const col = colors[j];
            if (pixels.data[i] === col[0] && pixels.data[i+1] === col[1] && pixels.data[i+2] === col[2]) {
              const c = j.toString();
              finalString += c.padStart(2, '0')
              found = true;
            }
          }
          if (!found) console.error('NOT FOUND');
        }

        console.log(finalString)
      });
    </script>
  </body>
</html>