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

Question

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

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

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

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

Answer 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), прежде чем пытаться сделать его эскиз.

Answer 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