Как отобразить измененные изображения на веб-странице, сохраняя соотношение сторон? - PullRequest
Новая
       14

Как отобразить измененные изображения на веб-странице, сохраняя соотношение сторон?

5 голосов
/ 10 июня 2009

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

РЕДАКТИРОВАТЬ: Извините, я имел в виду лучший способ отображения изображения, измененного размера на стороне клиента ..

Ответы [ 8 ]

7 голосов
/ 10 июня 2009

Легко. 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Client-Side Image Resize (Why?!)</title>
    <script type="text/javascript">
      window.onload = function() {
        var url = "http://www.google.com/intl/en_ALL/images/logo.gif";
        var img = new Image();
        img.onload = function() {
          var w = parseInt((this.width + "").replace(/px/i, ""), 10);
          var h = parseInt((this.height + "").replace(/px/i, ""), 10);

          // 50% scale
          w = (w / 2) + "px";
          h = (h / 2) + "px";

          var htmlImg = document.createElement("img");
          htmlImg.setAttribute("src", url);
          htmlImg.setAttribute("width", w);
          htmlImg.style.width = w;
          htmlImg.setAttribute("height", h);
          htmlImg.style.height = h;
          document.body.appendChild(htmlImg);
        }
        img.src = url;
      }
    </script>
  </head>
  <body>
    <h1>Look, I'm Resized!</h1>
  </body>
</html>
3 голосов
/ 25 ноября 2009

Flash 10 поддерживает изменение размера изображений на стороне клиента:

http://www.swfupload.org/

3 голосов
/ 06 октября 2009

Изменение размера перед загрузкой будет очень мощным инструментом. Это уменьшит время загрузки изображений на сервер. Часто наши пользователи имеют 5-мегапиксельные изображения, снятые со своих камер, и они понятия не имеют, как уменьшить размер с помощью редактора изображений. То, что мы хотим загрузить, это фотография шириной 1500 пикселей, jpg или png, сжатая до размера менее 500 Кбайт.

Этот наряд Тонкий файл утверждает, что может сделать это, но я еще не проверил это. Я скорее надеялся найти способ использовать JQuery для того же.

3 голосов
/ 10 июня 2009

Если вы не слишком отталкиваетесь от flash, теперь у flash10 есть выбор обработки загруженных файлов на стороне клиента перед их отправкой на сервер. Таким образом, вы можете использовать скрытый / прозрачный / небольшой объект флэш-памяти, чтобы позволить клиенту загрузить свое изображение, изменить размер изображения во флэш-памяти (у него есть хорошие API для обработки изображений), а затем отправить байтовые данные на сервер.

В as3 core lib есть кодировщики jpeg и png, если вы хотите закодировать изображение в любой формат перед загрузкой.

Если у вас нет вспышки, вы всегда можете скачать Flex 3 (или 4) SDK и использовать flashdevelop, чтобы сделать все это бесплатно =)

2 голосов
/ 23 февраля 2010

http://www.shift8creative.com/projects/agile-uploader/index.html Изменить размер перед загрузкой. Гибкая и тесная интеграция с JavaScript, позволяет использовать любой фоновый язык, быстрое и качественное изображение.

Хорошее демо, чем главная страница, демонстрирующая интеграцию JavaScript: http://www.shift8creative.com/projects/agile-uploader/advanced-demo.html

Бесплатно как в пиве. Надеюсь, это поможет.

1 голос
/ 10 июня 2009

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

http://docs.jquery.com/CSS/height

http://docs.jquery.com/CSS/width

0 голосов
/ 10 июня 2009

Изображения всегда должны подаваться в том размере, в котором они должны отображаться. Лучше иметь несколько копий на сервере, чем копировать один файл по сети и пытаться манипулировать на стороне клиента. Учтите это:

  • растрата сетевого ресурса для передачи изображения 500X400, когда вам действительно нужно 100X80
  • аналогичная трата ЦП в некоторых API обработки изображений для сжатия / увеличения изображения на стороне клиента

Изменение размера изображения не является простым изменением высоты / ширины. Когда вы указываете размер, отличный от (либо с помощью стилей, скрипта и т. Д.) Исходного размера изображения, браузер будет использовать собственный API (например, win32 draw) для правильного сжатия / увеличения изображения. Обрезать изображение (потерять части изображения) проще, но редко требуется.

0 голосов
/ 10 июня 2009

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

Если вы хотите что-то анимированное, вы можете использовать команду .animate(...) и установить высоту и ширину в качестве параметров. Это должно заставить изображение изменить плавный переход.

...