Изменение размера изображений на стороне клиента до миниатюр приводит к неровным и некрасивым изображениям.

Я пытаюсь использовать миниатюры на лету, поэтому мне не нужно будет иметь как миниатюры, так и настоящие изображения. Я сделал их с PHP (с отличной функцией imagecopyresampled), которая отлично работала.

Теперь я хочу сделать что-то подобное без PHP, и мне любопытны альтернативы. Использование браузеров для рендеринга не кажется хорошей идеей. Я получаю хорошие результаты с Explorer, Safari и Chrome, тогда как Firefox и Opera дают зазубренные большие пальцы. Я понял, что это связано со способностью браузеров масштабироваться с использованием бикубической интерполяции или нет.

Теперь мне интересно, есть ли способ позволить Javascript делать это, как это делал PHP ранее с бикубической интерполяцией, что приводит к более красивым большим пальцам, или здесь есть исправление для проблем браузера (я знаю о свойстве CSS -ms-interpolation-mode) ? В целом, каково мнение о сгенерированных на стороне клиента превью? Может быть, лучше продолжать использовать PHP, если нет разумной альтернативы?

PS Имеет ли значение, масштабирую ли я изображения с помощью Javascript или CSS?


person fast-reflexes    schedule 06.09.2010    source источник


Ответы (1)


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

Ваша проблема с масштабированием браузера может не иметь никакого отношения к их использованию бикубической интерполяции или нет. Существуют различные реализации bicubic, некоторые из которых отлично справляются с уменьшением изображения, а некоторые нет.

person Mark Ransom    schedule 29.12.2010
comment
Спасибо. Итак, мой дополнительный вопрос: есть ли способы сделать это с помощью Javascript? Мне любопытны альтернативы, позволяющие PHP сделать это. Я предполагаю, что PHP в данном случае является серверной частью, а Javascript и CSS — клиентской. Правильный? Я знаю, как это сделать с помощью PHP и CSS, но есть ли у Javascript рабочий метод, который может дать лучший результат, чем CSS? (Я знаю, что PHP — лучшая альтернатива, мне просто любопытно и я хочу сейчас получить полную картину ситуации). - person fast-reflexes; 07.01.2011
comment
@fast-reflexes, мне жаль, что я недостаточно знаю Javascript, чтобы ответить на этот вопрос. Вы также можете столкнуться с одной и той же проблемой разных результатов из разных реализаций Javascript. Единственный реальный способ быть последовательным — сделать это на стороне сервера, хотя для сервера доступен Javascript. - person Mark Ransom; 07.01.2011