Блог

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

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

Проверьте это:

• jQZoom
• Zoomimage — плагин jQuery
• jQuery ImgZoom
• Коробка для причуд

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

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

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

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

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

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

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

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