Tileset Maker v2

HTML

<script src="https://cdn.rawgit.com/eligrey/FileSaver.js/master/FileSaver.min.js"></script>
<script src="https://rawgit.com/eligrey/Blob.js/master/Blob.js"></script>
<script src="https://rawgit.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js"></script>
<ul>
    <li>
        <label for="tWidth">Tile Width:</label>
        <input id="tWidth" type="number" min="2" step="1" value="16" />
    </li>
    <li>
        <label for="tHeight">Tile Height:</label>
        <input id="tHeight" type="number" min="2" step="1" value="16" />
    </li>
</ul>
<hr>
<div id="dropzone">Drop Image Here</div>
<canvas id="source"></canvas>
<canvas id="work"></canvas>
<canvas id="current"></canvas>
<canvas id="black"></canvas>
<canvas id="dest"></canvas>
<hr>
<img id="tileset"/>

CSS

#dropzone {
    border: 2px dashed black;
    border-radius: 5px;
    height: 300px;
    text-align: center;
    width: 350px;
    display: -webkit-box;
    margin-left: auto;
    margin-right: auto;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
}
canvas {
    display: none;
    width: 0px;
}
img {
    clear: right;
}
label {
    display: inline-block;
    width: 75px;
}
input {
    width: 55px;
}

JavaScript

var source = new Image(),
    get = function (id) {
        'use strict';
        return document.getElementById(id);
    },
    makeWorker = function(script) {
        'use strict';
        var URL = window.URL || window.webkitURL,
            Blob = Blob || window.Blob,
            Worker = window.Worker;

        if (!URL || !Blob || !Worker || !script) {
            return null;
        }

        return new Worker(URL.createObjectURL(new Blob([script])));
    },
    dropzone = get('dropzone'),
    filename, black,
    tmx = '<?xml version="1.0" encoding="UTF-8"?>\r\n<map version="1.0" orientation="orthogonal" width="',
    blackCanvas = get('black'),
    sourceCanvas = get('source'),
    workCanvas = get('work'),
    currentCanvas = get('current'),
    destCanvas = get('dest'),
    blackContext = blackCanvas.getContext("2d"),
    sourceContext = sourceCanvas.getContext("2d"),
    workContext = workCanvas.getContext("2d"),
    currentContext = currentCanvas.getContext("2d"),
    destContext = destCanvas.getContext("2d");

// Implement image drop-in
dropzone.addEventListener('drop', function (e) {
    'use strict';
    var reader = new FileReader();
    e.preventDefault();
    reader.onload = function (evt) {
        source.src = evt.target.result;
    };
    
    filename = e.dataTransfer.files[0].name;
    reader.readAsDataURL(e.dataTransfer.files[0]);
}, false);
dropzone.addEventListener('dragover', function (e) {
    'use strict';
    e.preventDefault();
}, false);
get('tileset').addEventListener('click', function (e) {
    'use strict';
    saveAs(new Blob([tmx], {type: "text/plain;charset=utf-8"}), filename.split('.')[0] + ".tmx");
    destCanvas.toBlob(function(blob){
        saveAs(blob, filename.split('.')[0]+"-Tileset.png");
    });
}, false);

source.onload = function () {
    'use strict';
    var i = 0,
        t,
        x,
        y,
        w = source.width,
        h = source.height,
        tileWidth = get('tWidth').value,
        tileHeight...