Edit in JSFiddle

$(function() {

  var getPixel = function(context, x, y) {
    var data = context.getImageData(x, y, 1, 1).data;
    return new(function(r, g, b) {
      this.r = r;
      this.g = g;
      this.b = b;
      var self = this;
      this.getHash = function() {
        return self.r + '-' + self.g + '-' + self.b;
      };
      this.compare = function(rgb) {
        return rgb.r == self.r && rgb.g == self.g && rgb.b == self.b;
      };
    })(data[0], data[1], data[2]);
  };

  var toHex = function(n) {
    var hex = n.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
  }

  var form = $('form[data-role="data_source"]');

  var downloadFile = function(content, filename, mimeType) {
    if (!mimeType) {
      mimeType = 'application/octet-binary';
    }
    saveAs(new Blob([content], {
      type: mimeType
    }), filename);
  };

  var generators = {
    html_table: function() {

      var canvas = $('#preview_image canvas');
      var context = canvas.get(0).getContext("2d");
      var width = canvas.get(0).width;
      var height = canvas.get(0).height;
      var colorsNames = {};
      var lastColorIndex = 0;
      var main_class = 'gti' + (Math.random().toString(36) + '00000000000000000').slice(2, 12);
      var rez = '<body><table class="' + main_class + '" border="0" cellpadding="0" cellspacing="0">';
      var colspan = 0;
      var css_code = {};
      css_code['.' + main_class + ' td'] = 'width: 1px; height: 1px;';

      this.getStepsCount = function() {
        return width * height;
      };

      this.getFilename = function() {
        return 'output.html';
      };

      this.getGeneratedContent = function() {
        var rez2 = '<html><head><title>Sugeneruotas paveiksliukas</title><meta name="generator" content="Paveiksliuko konvertavimas į HTML (jsfiddle.net/mekdrop.name)" /></head><style type="text/css">';
        for (var n in css_code) {
          rez2 += n + '{' + css_code[n] + '}';
        }
        rez2 += '</style></head>' + rez + '</table></body></html>';
        return rez2;
      };

      var x = 0,
        y = 0;

      this.doNextStep = function() {
        x++;
        if (x >= width) {
          x = 0;
          y++;
        }
        if (x == 0) {
          rez += '<tr>';
        }
        var p1 = getPixel(context, x, y);
        if ((x + 1) < (width - 1)) {
          var p2 = getPixel(context, x + 1, y);
          if (p1.compare(p2)) {
            colspan++;
            return;
          }
        }
        var className = null;
        var hash = p1.getHash();
        if (typeof colorsNames[hash] == 'undefined') {
          lastColorIndex++;
          className = 'color' + lastColorIndex.toString(18);
          colorsNames[hash] = className;
        } else {
          className = colorsNames[hash];
        }
        css_code['.' + main_class + ' td.' + className] = 'background: #' + toHex(p1.r) + toHex(p1.g) + toHex(p1.b) + ';'
        rez += '<td class="' + className + '"';
        if (colspan > 0) {
          colspan++;
          rez += ' colspan="' + colspan + '"';
          css_code['.' + main_class + ' td[colspan="' + colspan + '"]'] = 'width: ' + colspan + 'px';
          colspan = 0;
        }
        rez += '></td>';
        if (x == (width - 1)) {
          rez += '</tr>';
        }
      };
    }
  };

  form.on({
    submit: function(e) {
      e.preventDefault();
      form.hide();
      var progress = $('#progress');
      progress.show();
      var generator = new generators[form.find('#result_format').val()]();
      var pbar = progress.find('progress').first();
      pbar.attr('min', 0);
      var count = generator.getStepsCount();
      pbar.attr('max', count + 1);
      var step = 0;
      var action = function() {
        for (var n = 0; n < 231; n++) {
          if (count < step++) {
            progress.hide();
            form.show();
            downloadFile(generator.getGeneratedContent(), generator.getFilename());
            return;
          } else {
            generator.doNextStep();
          }
        }
        pbar.attr('value', step);
        pbar.attr('data-percent', (100 / count * step).toFixed(2) + ' / 100.00');
        setTimeout(action, 50);
      };
      action();
    },
    reset: function(e) {
      form.find('#image_file').trigger('no_file_selected');
    }
  });

  form.find('#image_file').on({
    change: function() {
      if (this.files.length == 0) {
        $(this).trigger('no_file_selected');
      } else {
        $(this).trigger('selected_file', this.files[0]);
      }
    },
    no_file_selected: function() {
      var canvas = $('#preview_image canvas');
      canvas.css({
        'background-color': '#A0A0A0'
      });
      canvas.get(0).width = canvas.parent().width() - 15;
      canvas.get(0).height = 150;
      var context = canvas.get(0).getContext("2d");
      context.font = "18px Arial";
      context.fillStyle = 'white';
      context.textAlign = 'center';
      context.fillText("Nepasirinktas joks paveiksliukas", canvas.get(0).width / 2, canvas.get(0).height / 2);
    },
    selected_file: function(e, file) {
      var reader = new FileReader();
      reader.onload = function(e) {
        var img = new Image();
        img.onload = function() {
          var canvas = $('#preview_image canvas');
          canvas.get(0).width = img.width;
          canvas.get(0).height = img.height;
          var context = canvas.get(0).getContext("2d");
          context.drawImage(img, 0, 0);
        };
        img.src = e.target.result;
      }
      reader.readAsDataURL(file);
    }
  });

  form.find('#image_file').change();
});
<div class="container">
  <h3><a href="#" rel="bookmark" title="Permanent Link to Paveiksliuko konvertavimas į HTML">Paveiksliuko konvertavimas į HTML</a></h3>
  <div class="full-post-content">
    <p>
      Šis įrankis skirtas konvertuoti paveiksliuką į HTML'o kodą, kuris gali būti panaudotas arba imituoti 90-ųjų internetą arba padaryti paveiksliuką kone visiškai neišsaugojamą (t.y. jį išsaugoti kaip paveiksliuką kompiuteryje galima būtų nebent padarius
      ekrano nuotrauką bei apkirpus - ko dauguma mirtingųjų tikrai nedarys).
    </p>
    <p class="alert alert-warning">
      <strong>Įspėjimas:</strong> dideli paveiksliukai bus konvertuojami labai lėtai. Kai kuriais atvejais gali naršyklė net ir nulūžti.
    </p>
    <form data-role="data_source">
      <fieldset>
        <legend>Duomenys</legend>
        <div class="form-group">
          <label class="control-label col-sm-4" for="image_file">Paveiksliukas</label>
          <div class="col-sm-8 input-el">
            <input class="form-control" accept="image/*" id="image_file" maxlength="255" name="image_file" required="required" type="file">
            <div id="preview_image">
              <canvas width="400" height="350">Deja, Jūsų naršyklė nepalaiko Canvas elemento. Prašome atnaujinti!</canvas>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-4" for="result_format">Rezultato formatas</label>
          <div class="col-sm-8 input-el">
            <select class="form-control" name="result_format" id="result_format" required="required">
              <option value="html_table">HTML lentelė</option>
            </select>
          </div>
        </div>
        <div class="action_buttons form-group">
          <button type="reset" class="btn btn-danger">Išvalyti formą</button>
          <button type="submit" class="btn btn-primary">Konvertuoti ir atsiųsti rezultatą</button>
        </div>
      </fieldset>
    </form>
  </div>
  <fieldset id="progress" style="display: none;">
    <legend>Konvertuojama...</legend>
    <progress></progress>
    </fieldset>
</div>
.action_buttons {
  text-align: center;
}

.action_buttons button {
  margin-top: 20px;
}

#preview_image {
  max-width: 100%;
  max-height: 300px;
  overflow: auto;
}

progress {
  height: 25px;
  width: 100%;
}

progress:after {
  display: block;
  content: attr(data-percent);
  color: white;
  margin-right: auto;
  margin-left: 50%;
  vertical-align: middle;
  line-height: 1.8em;
}