Как стать автором
Обновить

Комментарии 80

Хм, не проще ли по-умолчанию создавать из пользовательского изображения preview-изображение, при нажатии на которое можно посмотреть оригинальное изображение которое при чем можно выдавать тоже не в чистом виде, а через скрипт, чтобы и его отмасштабировать, хмм собственно и первоначальное изображение можно выдавать через скрипт.
При необходимости могу поискать и примеры применения подобных методов, хотя в гугле и так их предостаточно.
UPD А масштабировать средствами браузера - не благодарное занятие, алгоритмы у них оставляют желать лучшего хотя и постепенно развиваются, но при этом файл всеравно ведь грузится оригинальный (бооольшой).
Угу, но это так сказать защита от дурака, который не хочет читать правила или не хочет им следовать... По умолчанию подразумевается, что юзвери будут хорошо себя вести и вставлять люстры не более 500px по ширине. Я наивен? :)
Вы очень наивны, пользователь по-умолчанию имеет в руке гранату, куда он ее кинет он даже сам не знает.
Так, что подобные ситуации нужно пресекать технически на стороне сервера(CMS например)-кратко
Сам счас как раз оч активно этим занимаюсь правда масштаб у меня несколько кх, веселей, на проекте 23 000++ компаний и у каждой свои тараканы.
Не очень корректный пример, но всё же вот » http://drupal.ru/ Никакой защиты от громадного изображения из веба не стоит, сегодня тестил в надежде узреть решение. Конечно надо делать скидку на то, что там большой % думающих людей... да и тематика обязывает.
> алгоритмы у них оставляют желать лучшего
Говорите за свой браузер :)
Говорю за свои браузеры opera 9.5, ff2.15-3rc3 - хоть убей с photoshop не сравнить :)
Вы видете на глаз разницу между билинейным сглаживанием и бикубическим без лупы? Вы наверное из тех, кто слышит разницу между mp3 320kbps и CD-записью :)
В первую очередь я вижу разницу между обработанным вручную изображением и отскалированным автоматически.
ЗЫ например рекомендуется для лучшего результата скалировать поэтапно, а не сразу от размера А к размеру Б приводить особенно если между ними большая разница.
Вас обманули.
О боже! Кто это сделал? А почему есть очевидная разница??
Потому что вам хочется в это верить. Или пример в студию.
Кстати, я сказал что разницы не будет? Я сказал что не будет лучшего результата (будет хуже или сравнимый). Чтобы это понять, достаточно представлять как работают алгоритмы интерполяции.
Не плохой пример, только еще хорошо бы версию FF привести, так как у них от версии к версии алгоритмы и методы манипуляций с изображениями не стоят на месте.
И вы говорите что разницы нет или что будет хуже или сравнимо если делать вручную???
Взгляните на приведенный вами пример.
ЗЫ особенно на контрастные переходы
Вы совсем чукча?
Я не говорил, блин, что делая вручную будет хуже или сравнимо, я сказал что при последовательном уменьшении несколько раз будет не лучше, чем при одном уменьшении. Читай, читайте, думайте, и только потом пишите.
смотрите ответ ниже.
Контрастные переходы — это и есть разница между билинейной и бикубической интерполяцией. Меня такая интерполяция для обычной пользовательской иллюстрации в сообщении, не влезшей в 500px дизайна, вполе устраивает.
Замечательно что устраивает, меня например устраивают превью 32х32 или 64х64 для изображений 1024х1024. Мы же не говорим о частных случаях и о вкусах.
Приведите пример что именно вы хотели бы видеть, так сказать условия эксперимента.
И вспомните собстно с чего началось- ...я вижу разницу между обработанным вручную изображением и отскалированным автоматически...

Этапы ручного скалирования если есть желания получить хороший результат и есть немного времени:
1.Уменьшение изображения в несколько шагов, в среднем 2-3 выходит (в зависимости от изображения желательно выбрать режим при скалировании)
2.Яркость +5-10%
3.Шарпен - по желанию
4.*альтернатива 3шагу - ручная отрисовка(контурная(?)) некоторых деталей
-это все относилось к Photoshop
-кратко.
Как ни странно, я тоже «вижу разницу между обработанным вручную изображением и отскалированным автоматически». А началось с того, что вы сказали что вы сказали «алгоритмы масштабирования у браузеров оставляют желать лучшего». Яркость +5-10%, шарпен - по желанию, это что — алгоритм масштабирования?
Учитесь отличать теплое от мягкого.
вы отвечали на мой пост в котром я писал - "В первую очередь я вижу разницу между обработанным вручную изображением и отскалированным автоматически." - что - "Вас обманули." - так?
и далее по тексту вашего сообщения: "это что — алгоритм масштабирования"
Скалирую по шагам мы можем изменять алгоритм масштабирования на каждом из них при желании - таким образом добиваясь наиболее подходящего результата, как минимум таким образом мы можем улучшить результат по сравнению с со скалированием в один шаг.
Нет, я ответил на фразу «например рекомендуется», что вас обманули те, кто порекомендовали :)
Я не понимаю кто бы мог вас обмануть, в фразе начинающейся словами «я вижу разницу».
> Скалирую по шагам…
Вас обманули. Или пример в студию.
(где-то я это уже писал)
UPD Гдето на хабре, при желании воспользуйтесь поиском, была статья про методы работы с изображениями в разных браузерах, если мне не изменяет память сравнивались Safari FF IE
Смешно. Вы сами-то пробовали? Попробуйте, наконец, разница очевидна любому человеку, имеющему глаза :) и она не в пользу браузеров.
Кстати, разницу между мп3 любой степени сжатия и цд услышать легко - ухо довольно чувствительно к фазовым искажениям. Вы просто не обращаете на неё внимание. Вон, японцы на слух "р" и "л" не различают, хотя для нас разница более чем очевидна. Этот тот же самый случай.
> Кстати, разницу между мп3 любой степени сжатия и цд услышать легко
Я со сверхчеловеками спорить не буду :)
Повторяю, если вы не поняли. Для 99% японцев любой человек, слышащий разницу между "р" и "л" является сверхчеловеком. Но мы то с вами прекрасно эту разницу слышим. С мп3 ровно то же самое. Разница там хорошо слышима тем, кто понял в чём она заключается :).
Тогда попрошу вас не говорить в чем же она заключается, я не хочу плюваться от любой mp3 мелодии, уж лучше быть в неведении :)
Абсолютно верно!
Многие люди, осознавшие эту разницу теперь завидуют тем, кто не в курсе. :)
В чём разница я уже сказал, это фазовые искажения, но эти слова описывают физику процесса, а не разницу в восприятии, так что не бойтесь :).
> Смешно. Вы сами-то пробовали? Попробуйте, наконец, разница очевидна любому человеку, имеющему глаза.

Попробовал, пример привел выше. Разница действительно очевидна, она в применении алгоритма, биилнейного против бикубического. Для данного топика, более быстрой биилнейной интерполяции хватает с головой.
Что бы создать превью его надо где то хранить, а задача как раз избежать этого. Или возможно я вас как то не так понял. За примеры из гугла буду благодарен.
Ну собственно нашел не плохой скритец правда он в составе cms, но в полне самостоятелен и не плохо написан чтобы было не сложно разобраться. Скачайте typolight(можно не инсталить просто выложите на сервак) и там найдите image.php который собственно и выполняет в реальном времени операции над изображениями (по-умолчанию в целях безопасности системы изображения загружайте в директорию tl_files). Форма обращения к файлам например такая src="image.php?src=tl_files/1144.jpg&height=100&width=400" вобщем там не сложно разобраться.
Спасибо, буду пробывать...
Сервер усрется все картинки перемасштбировать при каждом запросе...
В приведенной CMS этот метод применяется для всех изображений контента, можно посмотреть проекты созданные на ней и оценить реальную производительность на них.
Я думаю можно организовать композитный подход - метод "с запросами" для админки и метод со статическими "превью на сервере".
Во-первых, мучать пользователя загрузкой многомегабайтной (возможно) картинки, чтоб потом ее ужать браузером до 500пх с помощью max-width - издевательство.

Во-вторых, превью - это хорошо, но учтите, что ресайз картинки 2500х2500 до 500х500 способен вполне реально повесить процессор.

Вот так-то. Ищите золотую середину.
Поддерживаю, можно например проверять изображение по ссылки при отправлении сообщения/др. материала содержащего его на сервер на соответствия максимальному размеру файла и тд.
ищу :)
Определяем размер картинки, если приличный - ресайзим, если нет - шлём нафиг. Всё элементарно, в том числе и реализация. Золотой середины здесь нет, если правильный и неправильный способы.
Захватить мир очень легко... достаточно своять ядерного оружия, да побольше и укрыться в надежном месте...вопщем всё просто.

Я прекрасно понимаю алгоритм, я знаю как это должно быть в идеале, но я не знаю как это реализовать, а если б знал не спрашивал бы об этом в посте.
То есть, вам нужно готовое решение, которое можно будет скопипастить в свой проект?
Ох... Вы знаете, что такое drupal? Знаете какое количество модулей под него написано? И не поверите иногда среди них находиться именно то,что нужно, что долго искал или собирался делать сам, так вот сообщество друпалеров вполне может помочь в таком поиске, либо просто задать вектор как Kaaboeld...

Зачем писать пустые комменты о том что белое это белое, а черное это черное?
Я пытался понять, что вам нужно: конкретный алгоритм или реализация.
Первая строчка данного поста » Нужен совет по реализации.
Алгоритм это тоже вполне себе совет по реализации, не находите?
Ну может быть, тут особенности восприятия. Хотя в сообщением выше вы эти два понятия противопоставляете.
Повесить кстати не должен - не такой уж большой размер. Я ~3000 картинок таких как то batch-ресайзил - вот там да, весь сервер прочувствовал. Если по одной - не думаю что будут особые эффекты.
неа, при плавающем блоке сразу отпадает.

У меня есть сайт. И я хотел выровнять текст по центру. Сначала я написал так: <font align="center">text</font>, но потом узнал что есть css и написал так: <div style="text:center">test</div>.

Вот думаю написать про это статью.

Ваш совет мне очень помог, так и сделаю.
А если по теме я бы сделал так: искал бы в тексте поста src картинок и заменял бы его на вид http://site.ru/img/?src=src где лежал бы php скрипт который проверял размеры картинки и если они неудовлетворяют, то ресайзил бы ее и сохранял на у себя (можно даже временно), ну а дальше header('location:'.$new_src); Разумеется к этому нужно было бы добавить проверку есть ли уже копия картинки на сервере любым удобным вам методом.
А причём тут вообще Drupal? :)
Решение нужно конкретно под друпал. Возможно уже есть готовые модули под него.
Сам я не совсем в теме, но чтобы уж совсем не повесить, хорошо бы сбросить expression:

div.content img { width: expression(runtimeStyle.width = this.offsetWidth < 500 ? "auto" : 500); }
Кстати не работает
упс, точней не работает под ФФ
Ну и не должен, под CC его, под CC! :)
Кто такой CC??
И кстати спасибо. И Вам и автору поста.
Подтолкнули. У меня теперь при аплоаде ресайз, а при ссылках - стилем width режется. Беее) Красотища.
Об этом говорил автор в посте, если коротко, то это conditional comments.
он под ним) просто до этой минуты он не знал как это называется)
imagepicker уже отменили?
модуль image для ССК тоже отменили?
для ресайза модуль imagecache канул в лету?

учите матчасть!
Про imagepicker не знал, но смотря на остальное мне кажется вы не до конца прочитали условия задачи. Я не хочу грузить изображение на сервер, я хочу, что б оно оставалось на внешнем источнике.
Посмотрел imagepicker. Full html всем пользователям. ИМХО этот модуль исключительно для админов на стэнд элон сайтах. + он грузит имейдж на сервер.

Эх лишь бы в матчасть послать...
Я, конечно, дико извиняюсь. Может, я неправильно понял условия задачи.
Но модные пацаны делают так:
  1. Перед загрузкой картинки на сервер проверяем, не слишком ли большой размер файла. Вообще, эта проверка желательна, но не всегда катит — однажды делал сайт-портфолио для фотографа, так он здоровенные файлы постил. Но это, конечно же, исключение. А вообще проверять, чтобы загружаемые файлы не были больше какого-то разумного предела, необходимо. Не забываем, что тот же ненавистный php это за нас делает.
  2. Перед загрузкой картинки на сервер проверяем ее геометрические размеры — опять же, как и в предыдущем пункте, не всегда актуальная проверка, но в большинстве случаев — необходима.
    • Здесь не очень модные пацаны тупо отправляют клиенту какую-нибудь ошибку насчет того, что он охренел.
    • Нормальные пацаны (вроде меня :) дают возможность клиенту с помощью какой-нибудь js-библиотеки сделать crop изображения (т.е. выбрать область изображения, которая им действительно нужна).
  3. Сервер с помощью какой-нибудь ImageMagick пропорционально ресайзят картинку до какого-то условленного значения, и делают thumbnail, потому как лучше отдать статику, нежели каждый раз гонять туда/сюда полноразмерный файл, который предлагается ресайзить браузеру… Думаю, почему так, понятно и без меня.
  4. Сервер отдает клиенту thumbnail или там картинку, который wysiwyg с помощью document.execCommand вставляет в поле.

Кстати, еще вот какие требования есть к модности:
  1. Ajax и все такое.
  2. Никаких всплывающих окон браузера — используйте какой-нибудь thickbox.
  3. Заботьтесь о здоровье партнера и используйте презервативы.
  4. lightbox
>Перед загрузкой картинки на сервер проверяем
Это всё замечательно, и реализуется не очень модными паЦанами с помощью IMCE. Я же писал «...но возможности загрузки на сайт изображений нет, есть вариант только размещения иллюстраций, которые находятся в сети...»
Грузим картинку на сервер, делаем thumbnail и она уже указывает на внешнюю картинку. Можно с lightbox. Во всяком случае, имеем все плюсы и ни одного минуса.

Это вариант навскидку. Щас еще подумаю.
пишут пользователи тоже пусть на других сайтах, а у вас вырезки только пусть хранятся. что за хостинг такой, что невозможно 100кб картинку разместить?
терзают меня смутные сомнения, что все эти ограничения от жадности чьей-то.
У пользователей с разным рейтингом разные возможности. Допустим анонимам давать доступ к загрузке на сервер файлов как минимум не разумно.

Остальным же желательно предоставлять два варианта размещения изображений. Посмотрите как это реализованно на хабре, я могу как загрузить так и просто указать откуда показывать, к слову обратите внимание на АПдейт данного топика.

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

2. Остальным же желательно предоставлять два варианта размещения изображений.
Вам про вариант загрузки на сервер писалось. Если Вы уверены в порядочности пользователей, то предоставьте им первый вариант.

Ирония, как раз-то, к месту. ;)
По варианту загрузки на сервер у меня никаких вопросов нет, этот функционал уже реализовал доп. модулями друпала.

Про какой первый вариант вы говорите, немного не понял к чему это относится.
ну пусть тогда скрипт забирает картинку по урлу, ужимает ее и сохраняет в кеш.
в картинках, которые не просматривались больше Н дней проверяется, доступны ли они по своему внешнему урл. если да - то удаляются из кеша и выводятся способом, описанным в топике.
У меня схема простая (правда, это ASP.NET, но смысл тот же) - приложение лезет по урлу картинки, в ответ читает Stream с соответствующим Content-type, создает из него картинку, уменьшает ее и выдает в виде Response. Впрочем, решение временное, не теряю надежды придумать что-нибудь более практичное.
Комментарии не читала, возможно, уже предложили, но если хотите чистый css, без обработки картинки на сервере, попробуйте overflow:scroll — самый приличный вариант, по-моему.
Если не ошибаюсь в плавающем блоке (width строго не задан), это не спасёт...
Если бы у меня стояла такая задача, я б, наверное, вместо придумывания хитроумных алгоритмов использовал бы немного другую схему.
1. Возьмите себе несколько аккаунтов на бесплатном или дешевом хостинге с поддержкой PHP
2. Дальше устанавливаете на них скрипт ресайза изображений. Если хотите - можете даже сохранять тумбнейлы, но обязательно с дублированием на другом сервере.
3. Чтобы вас не прикрыли - распределяйте динамически нагрузку между серверами. При достаточно грамотном подходе - нагрузки никто даже не заметит. Админы обращают внимание на скрипт только тогда, когда вы выбираетесь за топ на достаточно долгое время. Также распределение нагрузки на такой "кластер" позволит вам не бояться того, что какой-то из аккаунтов прикроют.
Извините за долгий пост,но выгружу пару картинок.



Идея на оригинальность не претендует, но можно получить хорошие мощности и обьем места.
Маляка 1
Маляка 2
Маляка 3
Что-то у меня сегодня Хабр глючит. Извините.

http://flexyday.com/habr/1.jpg
http://flexyday.com/habr/2.jpg
http://flexyday.com/habr/3.jpg
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Истории