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

Question

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

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

Answer 1

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

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

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

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

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

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

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

Answer 2

Проверь это:

• jQZoom
• Zoomimage — плагин jQuery
• jQuery ImgZoom
• ФэнсиБокс

Answer 3

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