Каков наилучший способ иметь веб-страницу с картинкой пользователя (быстрый и постоянный размер)

Question

У меня есть веб-сайт asp.net-mvc с серверной частью SQL-сервера (использующий nhibernate для сопоставления OR).

Пользователи должны войти в систему, и я хочу, чтобы пользователи могли связать картинку с собой, чтобы я мог показать картинку рядом с именами людей в нескольких местах (что-то вроде того, что делает Facebook)

Я хочу избежать хранения изображений в базе данных напрямую, так как я думал, что загрузка будет медленной.Так что у меня в основном есть поле в таблице «User» с именем PictureURL, которое является просто строкой.Люди могут просто добавить любой URL к изображению, и я буду просто использовать hrefs в том месте, когда я хочу показать фотографии.

Мои 2 вопроса:

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

2.Люди связывают несколько различных форматов (png, jpg и т. Д.).

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

Как заставить людей ссылаться на изображение одинакового размера? Должен ли я применять определенное изображениеformat? Сейчас я использую css для изменения размера изображений, но мне сказали, что изменение размера на лету - дорогая и медленная операция.Должен ли я применять только один тип изображения.Я думал, что PNG будет быстрее, чем JPG, поэтому я попытался преобразовать JPG в PNG, но размер файлов на самом деле вырос до 6 раз размер изображения JPG.Я подумал о том, чтобы скрипт взял все изображения и изменил их размеры в автономном режиме, а затем связал их с новым изображением, но соотношение сторон у всех разное, поэтому я могу изменить размер, чтобы получить одинаковую высоту или ширину, но не оба.

Любые другие общие предложения о том, как я могу поддержать эту связанную концепцию изображения и обойти вышеупомянутые проблемы?

ПРИМЕЧАНИЕ. Я не могу использовать граватар, поскольку он заблокирован, но я счастливдля поддержки "внешнего решения"

Answer 1

Когда вы говорите, что разрешаете им указывать URL-адрес изображения, используете ли вы этот URL-адрес непосредственно в выводе или загружаете изображение на свой сервер и обслуживаете локальную копию? Изменение размера CSS является дорогостоящим для клиента, а не для вашего сервера, поскольку сервер не выполняет никакого преобразования данных, но клиент должен загрузить полноразмерное изображение и затем изменить его размер.

Я думаю, что хорошее общее решение для вас - это загрузить каждый образ на локальный сервер, запустить его с помощью некоторого программного обеспечения, которое уменьшит размер до X, и обработать этот локальный образ. Это может быть пакетным для запуска в то время, когда нагрузка на вашу систему низкая. Это также дает вам точный контроль над тем, какие изображения могут / не могут отображаться, если это когда-либо было проблемой.

Answer 2

В отношении размеров, я бы предложил вам использовать двухэтапный процесс: Сначала вы загружаете изображение и сохраняете его во временном местоположении. Здесь вы можете изменить размер изображения, сохранив пропорции, просто чтобы он соответствовал следующему шагу. Затем, на втором шаге, вы можете использовать JCrop или любой другой инструмент обрезки JavaScript и заставить пользователя выбрать квадратную область изображения. После того, как пользователь выберет область изображения, вы можете создавать миниатюры изображения с фиксированным размером и сохранять их в любом месте (БД, файловая система, облако и т. Д.).

System.Drawing.Image имеет метод GetThumbnailImage для создания миниатюр после загрузки изображения.

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

Привет.

Answer 3

Я бы порекомендовал Натанелу Джонсу Модуль изменения размера изображения на стороне сервера для ASP.NET, ASP и PHP / IIS .Он очень прост в использовании, например

<img src="/Images/12345.jpg?maxWidth=200&maxHeight=200&crop=(0,0,200,200)&format=jpg" alt="" />

. Он имеет производительный кеш для созданных изображений, поэтому производительность не должна быть проблемой.Вы должны заплатить 69 $, но вы получите исходный код.Я долго колебался, но теперь не жалею об этой покупке ни одной секунды.

Естественно, чтобы это работало, вам нужно сохранить исходные изображения на вашем сервере.

Answer 4

Я бы посоветовал не хранить URL изображения, а затем отображать его. Многие сайты не одобряют это, потому что вы используете их пропускную способность для отображения изображения. Многие сайты также не позволяют вам сделать это из-за проблемы с пропускной способностью, и тогда вы просто получите 404.

Используйте сервис изображений / аватаров, такой как Gravatar.

Answer 5

Обычно вы изменяете размер изображения, когда оно поступает на сервер, и удаляете оригинал.Существуют решения, которые могут изменить размер на клиенте, но они добавляют дополнительные требования к клиенту, такие как Adobe Flash.

Google для ASP.NET и Thumbnail поможет вам начать, не так ли?

например: http://dotnetslackers.com/articles/aspnet/Generating-Image-Thumbnails-in-ASP-NET.aspx