Элиот Стокс - Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки

[63]

Лучшее, что есть в HTML5, – это элемент canvas (холст). Казалось бы, это просто элемент для рисования (а без JavaScript он и вовсе лишен смысла), но он же является мощным средством для чтения и управления изображениями и видеоданными. Вместе с FileReader и функцией DragandDrop («перетащи и оставь») в современных браузерах мы можем добиться реального успеха. Почему бы нам не создавать миниатюры в браузере?

Рисунок 5.8. Перетаскивание с использованием canvas и FileReader

Рисунок 5.9. Созданные миниатюры

У большинства систем управления контентом и блогов есть загрузчики файлов для создания миниатюр из изображений. Поэтому давайте использовать их в качестве нашего резерва (к тому же мы здесь не будем погружаться в серверный код):

Pick image

Thumbnails

Давайте добавим разные стили. И, если браузер поддерживает их, мы заменим форму на сообщение, где попросим пользователя перетащить изображения в раздел:

if (window.FileReader && (('draggable' in document.body) ||

('ondragstart' in document.body && 'ondrop' in document.body))) {

var s = document.querySelector('section'),

o = document.querySelector('output'),

c = document.createElement('canvas'),

cx = c.getContext('2d'),

thumbsize = 100;

c. width = c.height = thumbsize;

document.body.classList.add('dragdrop');

s. innerHTML = 'Drop images here';

Здесь мы проверили, как браузер поддерживает функции FileReader и DragandDrop (досадно то, что Safari не поддерживает первое, а Opera – последнее). Если браузер их не поддерживает, то мы берем те элементы, которые нам нужны. Мы создаем элемент canvas и сохраняем его 2-Dcontext. Потом мы определяем размеры миниатюр и, соответственно, меняем размеры canvas. И, наконец, мы добавляем класс dragdrop для задания стиля, и заменяем форму на сообщение, приглашающее пользователей перетаскивать изображения.

Как правило, если вы перетаскиваете изображение в браузер, он просто заменяет им текущий документ. Мы хотим избежать этого. Вот почему мы меняем поведение браузера при перетягивании. Мы также добавили класс, чтобы показать пользователю, что что-то происходит:

s. addEventListener('dragover', function (evt) {

s. classList.add('active');

evt.preventDefault();

}, false);

Мы удаляем класс, если перетаскивание отменяется:

s. addEventListener('dragleave', function (evt) {

s. classList.remove('active');

evt.preventDefault();

}, false);

Все остальные функции действуют в drop-обработчике:

s. addEventListener('drop', function (ev) {

s. classList.remove('active');

var files = ev.dataTransfer.files;

if (files.length > 0) {

var i = files.length;

while (i-) {

var file = files[i];

if (file.type.indexOf('image')!== -1) {

createthumb(file);

}

}

}

ev.preventDefault();

}, false);

Первое, что мы сделали здесь, это убрали класс active, потому что делали его с перетаскиванием. Событие перетаскивания дало нам объект dataTransfer, в котором содержатся «перетащенные» файлы. Далее мы проверяем, был ли хоть один из файлов перемещен и затем начинаем повторять это действие для каждого из них (Цикл while{}– причудливый способ сделать цикл for{}, но не помещая длину в кэш-память или не используя вторую переменную итератора). Еще проверяем, является ли текущий файл изображением, а потом отсылаем его к функции createthumb()(создания миниатюры). В конце мы предотвращаем поведение браузера по умолчанию при перетягивании изображения. И все, с этим мы разделались.

function createthumb(file) {

var reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function (ev) {

var img = new Image();

img.src = ev.target.result;

img.onload = function() {

cx.clearRect(0, 0, thumbsize, thumbsize);

var thumbgeometry = resize(this.width, this.height,

thumbsize, thumbsize);

cx.drawImage(img, thumbgeometry.x, thumbgeometry.y,

thumbgeometry.w, thumbgeometry.h);

var thumb = new Image();

thumb.src = c.toDataURL();

o. appendChild(thumb);

};

};

}

Функция createthumb()инициирует новый FileReader и читает изображение как цепочку данных. Если считыватель загружен удачно, то мы создаем новое изображение в браузере и устанавливаем его атрибут srcдля результата транзакции FileReader.

Когда изображение успешно загружено, мы очищаем элемент canvas методом clearRect(). Это обязательно. Иначе нам придется создавать миниатюры, которые добавляются друг к другу каждый раз, когда вызывается функция.