t2-canvas

by SerGen

HTML

<input type="file" id="i" multiple>
<output id="o"></output>

CSS

body {
    margin: 0;
}
output {
    display: block;
    margin-top: 1em;
}
canvas {
    vertical-align: middle;
}

JavaScript

var i = document.getElementById('i');
var o = document.getElementById('o');
var URL = window.URL || window.webkitURL;

var previewW = 150;

i.addEventListener('change', function () {
    
    var files = this.files;
    
    o.innerHTML = '';
    
    for (var i = 0; i < files.length; i++) {
        var f = files[i];
        
        // если есть нужный метод и загружается картинка
        if (URL.createObjectURL && f.type.match('image.*')) {
            
            // получаем ссылку на файл и создаём объект изображения
            var url = URL.createObjectURL(f);
            var img = new Image();
            
            img.onload = function(e) {
                
                // изображение будет отрисовываться в канвас
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                
                // размеры холста нужно будет задавать скриптом
                // получаем соотношение сторон изображения
                var ratio = this.naturalWidth / this.naturalHeight;
                var canvasW = previewW;
                var canvasH = canvasW / ratio;
                
                // отрисовываем
                canvas.width = canvasW;
                canvas.height = canvasH;
                ctx.drawImage(this, 0, 0, canvasW, canvasH);
                
                // добавляем миниатюру
                o.appendChild(canvas);
                
                // избавляемся от ненужной ссылки
                URL.revokeObjectURL(this.src);
            }
            
            // начинаем загружать файл
            img.src = url;
        }
    };
})