image quality experiments

by justjohn

HTML

<input type="text" id="url" value="www.canyouseethesunset.com/uploaded_images/night-marchers-see-you-in-magic.jpg" /> <button id="changeUrl">Test URL</button>
<br />
<div id="demo"></div>

CSS

.preview {
    margin: 5px;
    display: inline-block;
    text-align: center;
}

JavaScript

function makeImage(img, x, y, q) {
    var url = 'http://ipqa.byledge.net/getThumbnail_'+x+'x'+y+'=' + img;
    var qurl = url+"?quality="+q;
    return qurl;
}

function genImage(url, w, h) {
    var imgEl = document.createElement('img');
    imgEl.src = url;
    imgEl.style.width = w + "px";
    imgEl.style.height = h + "px";
    return imgEl;
}

function preload(img, target, sizes) {
    var sm = {}, bg = {}, output = {};
    
    for (var i=10; i<= 100; i+= 10) {
        sizes.forEach(function(size) {
            var url = makeImage(img, size, size, i);
            var imgEl = genImage(url, target, target);
            
            if (!output[size])
                output[size] = {};
            
            output[size][i] = imgEl;
        });
    }
    
    return output;
}

function initControl(label, fn) {
    var btn = $(document.createElement('button'));
    btn.html(label);
    btn.on('click', fn);
    return btn;
}

function initSelector(src, title, initQ) {
    var container = $(document.createElement('div'));
    container.addClass('preview');
    
    var titleEl = $(document.createElement('div'));
    titleEl.html(title);
    container.append(titleEl);
    
    var img = $(document.createElement('div'));
    img.append(src[initQ]);
    container.append(img);
    
    var qLabel = $(document.createElement('span'));
    qLabel.html(initQ);
        
    container.append(initControl("Prev", function() {
        initQ -= 10;
        if (initQ < 10) initQ = 10;
        img.empty().append(src[initQ]);
        qLabel.html(initQ);
    }));
    
    container.append(qLabel);
    
    container.append(initControl("Next", function() {
        initQ += 10;
        if (initQ > 100) initQ = 100;
        img.empty().append(src[initQ]);
        qLabel.html(initQ);
    }));
    
    return container;
}

function doDemo(url) {
    var big = 300;
    var mid = 200;
    var small = 150;
    
    var source = preload(url, small, [small, mid, big]),
        original =...