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

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

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

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

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


html fileapi
person Evan Carroll    schedule 12.07.2010    source источник
comment
Ответьте на этот вопрос, это может помочь: stackoverflow.com/questions/2303690/   -  person robertc    schedule 13.07.2010

Ответы (2)


arrow_upward
16
arrow_downward

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

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 = getThumbnail(image, 1/5);

document.body.appendChild(thumbnail);

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

person Daniel Brockman    schedule 26.09.2011

arrow_upward
10
arrow_downward

Хорошо, я вижу эту работу как рисование изображения на холсте меньшего размера, а затем экспорт холста. Скажем, вам нужна миниатюра размером 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;

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

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

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

person Colin Atkinson    schedule 14.05.2011