Как создать эскиз клиентской стороны в современном браузере?

Я ищу элегантный способ создания эскиза для использования с FileAPI. В настоящее время я получаю DataURL, представляющий изображение. Проблема в том, что если изображение очень велико, чем перемещение его и рендеринг, он становится интенсивным. Я вижу 2 варианта, чтобы обойти это.

  • Создание эскиза на клиенте
  • Создайте миниатюру на сервере, отправьте эскиз обратно клиенту (AJAX).

С HTML5 мы имеем элемент canvas? Кто-нибудь знает, как использовать его для создания эскизов из изображений? Они не должны быть идеальными - качество выборки приемлемо. Есть ли плагин jQuery, который сделает это для меня? Есть ли другой способ ускорить использование клиентами больших изображений?

Я использую HTML5 и Firefox 3.6+: нет необходимости поддерживать что-либо кроме Firefox 3.6+, пожалуйста, не предлагайте предложения для IE 6.0

Ответы

Ответ 1

Вот что вы можете сделать:

function getThumbnail(original, scale) {
  var canvas = document.createElement("canvas");

  canvas.width = original.width * scale;
  canvas.height = original.height * scale;

  canvas.getContext("2d").drawImage(original, 0, 0, canvas.width, canvas.height);

  return canvas
}

Теперь, чтобы создать эскизы, вы просто выполняете эквивалент этого:

var image = document.getElementsByTagName("img")[0];
var thumbnail = getThubmnail(image, 1/5);

document.body.appendChild(thumbnail);

Примечание. Не забудьте убедиться, что изображение загружено (с помощью onload), прежде чем пытаться сделать его миниатюру.

Ответ 2

Хорошо, как я вижу, что эта работа рисует изображение на холсте меньшим размером, а затем экспортирует холст. Предположим, вы хотите 64-кратное эскиз:

var thumbSize = 64;
var canvas = document.getElementById("canvas");
canvas.width = thumbSize;
canvas.height = thumbSize;
var c = canvas.getContext("2d");
var img = new Image();
img.onload = function(e) {
    c.drawImage(this, 0, 0, thumbSize, thumbSize);
    document.getElementById("thumb").src = canvas.toDataURL("image/png");
};
img.src = fileDataURL;

С помощью этого кода элемент изображения с идентификатором "большой палец" используется в качестве элемента эскиза. fileDataURL - это URL-адрес данных, полученный из файла API.

Дополнительная информация о рисовании изображений на холсте: http://diveintohtml5.info/canvas.html#images

И при экспорте данных холста: http://msdn.microsoft.com/en-us/library/ie/ff975241(v=vs.85).aspx

Ответ 3

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

Я бы предложил использовать более сложную библиотеку, например pica. Также см. эту более углубленную дискуссию по теме.