DM Image Resizer Batch Test Tool

by mVChr

HTML

<h1>DM Image Resizer Batch Test Tool</h1>
<form id="resize-images">
    <label for="w">Dimensions</label>
    <input type="text" name="w">x<input type="text" name="h">
    <label for="crop-type">Crop type</label>
    <select name="crop-type">
        <option value="crop_min">Crop</option>
        <option value="matte">Matte</option>
    </select>
    <label for="urls">URLs of images to resize</label>
    <textarea name="urls"></textarea>
    <button type="submit">Resize 'em</button>
</form>
<div id="results"></div>

CSS

html, body {
    font: 16px/1.3 Airal, Helvetica, sans-serif;
}

h1 {
    font-size: 32px;
    font-weight: bold;
}

label, button, textarea, img {
    display: block;
}

label {
    background: #EEE;
    border-bottom: 1px solid black;
    margin: 1em 0 0.25em 0; padding: 0.25em;
    width: 90%;
}

button {
    font-size: 18px;
    font-weight: bold;
    margin: 1em 0; padding: 0.25em 2em;
}

input {
    width: 50px;
}

textarea {
    width: 90%; height: 150px;
}

JavaScript

$('#resize-images').submit(function (ev) {
    ev.preventDefault();
    
    var $this = $(this),
        $res = $('#results'),
        data = $this.serializeArray(),
        w = data[0].value,
        h = data[1].value,
        cropType = data[2].value,
        urls = data[3].value.replace(/\n/g, '|||||').split('|||||'),
        resizerUrl = 'http://photos2.demandstudios.com/DM-Resize/';
    
    $res.html('');
    
    $.each(urls, function (i, v) {
        if ($.trim(v)) {
            $res.append('<label>' + v + '</label><img src="' + resizerUrl + 
                        encodeURIComponent(v.replace(/^https?:\/\//i, '')) +
                        '?w=' + w +
                        '&h=' + h +
                        '&' + cropType + '=1" />');
        }
    });
});