Gamebuino Image to Code

HTML

<!doctype html>
<html>

  <head>
    <title>Gamebuino :: Convert your image to cpp</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

  </head>

  <body>
    <div class="container">
      <header class="header clearfix">
        <h3 class="text-muted">Image conversion</h3>
      </header>
      <main role="main">
        <form method="post" action="" enctype="multipart/form-data">
          <div class="form-group">
            <label for="mode">Color Mode</label>
            <select class="form-control" id="mode">
              <option>rgb565</option>
              <option>index</option>
            </select>
          </div>
          <div class="form-group">
            <label>Frame loop</label>
            <input type="text" class="form-control" id="frameloop" value="1" />
          </div>
          <div class="form-group">
            <label>Number of frames</label>
            <input type="text" class="form-control" id="framecount" value="1" />
          </div>

          <div class="form-group">
            <label>Frame Width</label>
            <input type="text" class="form-control" id="framewidth" value="0" />
          </div>
          <div id="drop_zone" class="jumbotron">
            <p class="lead">Drop your image into this zone</p>
          </div>
          <div class="hidden">
            <label for="file">Your image</label>
            <input type="file" class="form-control-file" id="file">
          </div>
          <canvas id="preview"></canvas>
          <textarea id="map" class="form-control"></textarea>
        </form>
      </main>
    </div>
    <script src="https://dev.gougouzian.fr/gamebuino/jimp.min.js"></script>
    <script...

CSS

.is-dragover {
  background-color: grey;
}

.hidden {
  display: none;
}

#preview {
  height: 1px;
}

JavaScript

var colorIndex = [
    0x0000, // black
    0x0210, // darkblue
    0x9008, // purple
    0x044A, // green
    0xCC68, // brown
    0x5268, // darkgray
    0xACD0, // gray
    0xFFFF, // white
    0xD8E4, // red
    0xFD42, // orange
    0xF720, // yellow
    0x8668, // lightgreen
    0x7DDF, // lightblue
    0x4439, // blue
    0xCA30, // pink
    0xFEB2 // beige
  ],
  rgb2index = function(rgb) {
    for (var i = 0; i < 16; i++)
      if (rgb == colorIndex[i])
        return i;
    var max_diff = 0xFFFF,
      b = rgb << 3,
      g = (rgb >> 3) & 0xFC,
      r = (rgb >> 8) & 0xF8,
      min_indx = 0,
      min_diff = 0xFFFF;
    for (var i = 0; i < 16; i++) {
      var rgb2 = colorIndex[i],
        b2 = rgb2 << 3,
        g2 = (rgb2 >> 3) & 0xFC,
        r2 = (rgb2 >> 8) & 0xF8,
        diff = Math.abs(b - b2) + Math.abs(g - g2) + Math.abs(r - r2);
      if (diff < min_diff) {
        min_diff = diff;
        min_indx = i;
      }
    }
    return min_indx;
  };

$(function() {

  function sanitize(str) {
    return str.substr(0, str.length - 4).replace(/[^A-Za-z0-9]/g, '_');
  }

  $("#drop_zone").on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
      e.preventDefault();
      e.stopPropagation();
    })
    .on('dragover dragenter', function() {
      $("#drop_zone").addClass('is-dragover');
    })
    .on('dragleave dragend drop', function() {
      $("#drop_zone").removeClass('is-dragover');
    })
    .on('drop', function(e) {
      $('input[type="file"]').prop('files', e.originalEvent.dataTransfer.files);
    });
  $('input[type="file"]').change(function() {
    var file = $(this);
    var reader = new FileReader();
    reader.onload = function(event) {
      var img = new Image();
      img.onload = function() {
        Jimp.read(img.src).then(function(image) {
          var canvas = $('#preview');
          canvas.attr({
            width: image.bitmap.width,
            height: image.bitmap.height
         ...