Кадрирование изображений на сайте.

malls,

там ведь работы, если хочется красиво - 1 день. Зачем ходить по чужим граблям. делал такое очень давно (подгон обоев под разные мобильники). Все достаточно просто. В качестве примера использовал http://mkartinki.ru/img1792.htm когда нажимаешь кнопку "В мобильник" (там с прототипом, но я взял только идею).

Там правда все просто. Если исходники найду - кину.

Самое примитивное, что пришло в голову (осторожно, много букв):

<style type="text/css">
.pic {background:url('путь до исходного изображения');position:fixed;} /* Стиль блока, содержащего исходное изображение */
.wnd {background:white;opacity: 0.2;} /* Стиль окна кадрирования */
</style>

<script type="text/javascript">

  // Эти параметры мы подставляем на сервере
  var Width = 100; // Ширина исходника
  var Height = 100; // Высота исходника
  var WndWidth = 50; // Начальная ширина окна кадрирования
  var WndHeight = 50; // Начальная высота окна кадрирования
  var WndX = 0; // Начальное положение окна кадрирования по X
  var WndY = 0; // Начальное положение окна кадрирования по Y

  // Перемещение окна кадрирования
  function moveWnd(x, y) {
    var Wnd = document.getElementById('wnd');
      if (WndX + x >= 0 && WndX + x <= Width - WndWidth) {
	WndX = WndX + x;
      }
      if (WndY + y >= 0 && WndY + y <= Height - WndHeight) {
	  WndY = WndY + y;
      }
      refreshWnd();
    }
    // Изменение размера окна кадрирования
    function resizeWnd(width, height) {
      var Wnd = document.getElementById('wnd');
      if (WndWidth + width >= 1 && WndX + WndWidth + width <= Width) {
	  WndWidth = WndWidth + width;
      }
      if (WndHeight + height >= 1 && WndY + WndHeight + height <= Height) {
	  WndHeight = WndHeight + height;
      }
      refreshWnd();
    }
    // Обновление окна кадрирования с текущими координатами
    function refreshWnd() {
      var Wnd = document.getElementById('wnd');
      Wnd.style.marginLeft = WndX;
      Wnd.style.marginTop = WndY;
      Wnd.style.width = WndWidth;
      Wnd.style.height = WndHeight;
      document.getElementById('inpX').value=WndX;
      document.getElementById('inpY').value=WndY;
      document.getElementById('inpW').value=WndWidth;
      document.getElementById('inpH').value=WndHeight;
}
</script>

Позиция:
<table>
  <tr><td></td><td><a href="#" onClick="moveWnd(0, -1)"> &uarr; </a></td><td></td></tr>
  <tr><td><a href="#" onClick="moveWnd(-1, 0)"> &larr; </a></td><td></td><td><a href="#" onClick="moveWnd(1, 0)"> &rarr; </a></td></tr>
  <tr><td></td><td><a href="#" onClick="moveWnd(0, 1)"> &darr; </a></td><td></td></tr>
</table>

Размер:
<table>
  <tr><td></td><td><a href="#" onClick="resizeWnd(0, -1)"> &uarr; </a></td><td></td></tr>
  <tr><td><a href="#" onClick="resizeWnd(-1, 0)"> &larr; </a></td><td></td><td><a href="#" onClick="resizeWnd(1, 0)"> &rarr; </a></td></tr>
  <tr><td></td><td><a href="#" onClick="resizeWnd(0, 1)"> &darr; </a></td><td></td></tr>
</table>

<!-- Эта форма с координатами окна кадрирования уйдет на сервер -->
<form action="" method="post">
X: <input id="inpX" name="inpX" value=""/><br/>
Y: <input id="inpY" name="inpY" value=""/><br/>
W: <input id="inpW" name="inpW" value=""/><br/>
H: <input id="inpH" name="inpH" value=""/><br/>
<input type="submit" value="Обрезать"/>
</form>

<div id="pic" class="pic">
  <div id="wnd" class="wnd"></div>
</div>

<script type="text/javascript">
  var Pic = document.getElementById('pic');
  Pic.style.width = Width;
  Pic.style.height = Height;
  refreshWnd();
</script>

Разумеется, далеко не самая удобная реализация.

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

Почему ходить - хочется просто о них знать. :)

То что в примере как раз подобное и планирую... Только там жесткие пропорции - мне нужно "помягче"

wdsg не разбирался пока чего там, но обязательно посмотрю потом - сейчас просто срубает уже, почти сутки не спал. Спасибо в любом случае...

ну так энто понятно, кто же с х...ом на перевес в атаку бегает....

От себя, если бы сейчас была задача, клиентскую часть делал бы только на флеше, AS3 стал проще чем JS для подобных вещей, а кросброузерность / кросплатформенность 101%

Полезный плагин для jquery http://odyniec.net/projects/imgareaselect/

(пожимаем плечами) - ну, копайтесь в исходниках, там все банально. Тольао зачем? Так Вы и до асма докатитесь:)

Решал такую задачу, когда делал сервис создания карточек со вставлением туда собственного лица. На стороне браузера использовал http://www.speedingrhino.com/cropper.htm - вполне удобно и просто получилось внедрить код в приложение. Для выбора регионов на больших фотках, например с фотоаппаратов, предварительно сжимал исходную фотку, чтобы она поместилась на страничке, а потом умножал выбранные юзером координаты лица на коэффициент сжатия картинки и дальше резал как надо.

Ну это... смотря "на куда"... :)))

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

Тоже весьма достойненько смотрится! Спасибо!

Да точно такую логику я и продумываю... В корень зрите! :)

Этой чушке подавай браузеры, которые чуть не в следующем году выйдут, в отличие от примеров T.R.O.N и Ghost Bear

Ради бога, уши не прищемите! :)

Я с него когда то начинал... Не пугает... :) Только не для веб.

Вы на каком сайте новости читаете? IE 6.0 вышел уже давно, а не в следующем году выходит:)

Нет, ну хотите все делать руками, что бы после Вас все в куче кода разбирались, вместо пары аккуратных вызовов функций - хозяин барин. Но зачем откровенную чушь про jquery говорить про якобы несовместимость с современными браузерами... религиозный фанатик детектед?

Нет. Перечитайте свой ЗЫЗЫ в первом посте. У imgareaselect код простейший, мы Вам и сказали в первом же ответе - копайтесь в исходниках если хотите, изучайте.

А еще мы там функций вида echo и mysql_query не видели. Ни в коем случае не используйте php пока функции его не появятся в мануалах по JS . А еще в asme нет функций типа alert( - ни в коем случае не используйте JS пока его функции не появятся в документациях по asm-у.

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

Поэтому просто не холиварьте и не будете вынуждать Вам отвечать, ок?:)