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 for="palette">Palette</label>
            <select class="form-control" id="palette">
              <option>Default</option>
              <option>Endesga16</option>    
              <option>Endesga16variant</option>
              <option>Dawnbringer16</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...

CSS

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

.hidden {
  display: none;
}

#preview {
  height: 1px;
}

JavaScript

var colorIndex = {},
  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
          }).height(image.bitmap.height);          
          
          var context = canvas[0].getContext('2d');
          context.drawImage(img, 0, 0);
          
          switch ($('#palette').val()){
             case 'Endesga16':
               colorIndex = [0x3946,0x71e7,0xbb6a,0xe52e,0x9946,0xe1c8,0xfc85,0xff2c,0x19e7,0x3388,0x6629,0xffff,0x4b30,0xadfa,0x43a,0x2f5e];...