Увеличение изображения с помощью javascript?

У кого-нибудь есть хороший код для увеличения изображения с помощью javascript?

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


person alexmac    schedule 11.10.2008    source источник


Ответы (3)


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

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

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

Этот сервис просто возвращает тип image/jpeg и отправляет изображение.

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

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

Я надеюсь, что это по крайней мере полезно и приведет вас к чему-то полезному.

person mattlant    schedule 11.10.2008
comment
Спасибо Матлант. Это демонстрация, чтобы попытаться убедить клиента купить систему, поэтому мы не хотим тратить на нее слишком много времени. У меня уже есть служба, которая изменяет rgb и контрастность, поэтому я могу просто добавить масштабирование, как вы указали. - person alexmac; 12.10.2008

Проверь это:

person Christian C. Salvadó    schedule 11.10.2008

Насколько велики изображения? Если это огромные изображения, вы делаете их в стиле карты Google, используя этот http://www.casa.ucl.ac.uk/software/googlemapimagecutter.asp

person willi    schedule 11.10.2008