БлогNot. Обрезкин: подбор размеров при масштабировании прямоугольных областей

Обрезкин: подбор размеров при масштабировании прямоугольных областей

Подобный скрипт уже встречался в моих материалах вот здесь, но в показанной ниже версия логика отличается. Скрипт предназначен для расчёта размеров прямоугольной области на основе пропорционального масштабирования и/или обрезания другой прямоугольной области :) То есть, скрипт показывает новый размер кадра фото или видео, реализуя оба основных способа масштабирования. Арифметически всё элементарно - линейная пропорция, просто не хочется каждый раз для её вычисления вызывать калькулятор или Excel, так что мне лично этот маленький скрипт оказался полезен при расчётах размеров уменьшенных изображений на сайты.

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

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

При методе расчёта "обрезание" (нижняя радиокнопка) нужно заполнить все 4 поля ввода, целевые размеры будут приведены к пропорции исходных за счёт обрезания вычисленного количества пикселов слева/справа или сверху/снизу (по большей стороне).

Ниже этот маленький сервис показан в работе и приведён полный исходник на Javascript.

Исходная ширина ...и высота, пикс.
Целевая ширина ...и высота, пикс.
Изменять размеры пропорционально
Обрезать по большей стороне
 

<script type="text/javascript">
function trim(string) { return string.replace (/(^\s+)|(\s+$)/g, ""); }
function equal_prop(sx,sy,tx,ty) { 
 var nx=Math.round(ty*sx/sy); var ny=Math.round(tx*sy/sx); 
 return (nx==tx && ny==ty); 
}
function Main () {
 var ssx=trim(document.Q.sx.value);
 var ssy=trim(document.Q.sy.value);
 var stx=trim(document.Q.tx.value);
 var sty=trim(document.Q.ty.value);
 var sx,sy,tx=0,ty=0;
 var error=0;
 var ers="Обнаружены следующие ошибки:\n";
 if (ssx.length==0) {
  ers+="Не введена исходная ширина\n";
  error++;
 }
 else {
  sx=parseInt (ssx);
  if (isNaN(sx) || sx<1) {
   ers+="Введена недопустимая исходная ширина\n";
   error++;
  }
 }
 if (ssy.length==0) {
  ers+="Не введена исходная высота\n";
  error++;
 }
 else {
  sy=parseInt (ssy);
  if (isNaN(sy) || sy<1) {
   ers+="Введена недопустимая исходная высота\n";
   error++;
  }
 }
 if (stx.length==0 && sty.length==0) {
  ers+="Нужно выбрать целевую ширину и/или высоту\n";
  error++;
 }
 else {
  if (stx.length!=0) {
   tx=parseInt (stx);
   if (isNaN(tx) || tx<1) {
    ers+="Введена недопустимая целевая ширина\n";
    error++;
   }
  }
  if (sty.length!=0) {
   ty=parseInt (sty);
   if (isNaN(ty) || ty<1) {
    ers+="Введена недопустимая целевая высота\n";
    error++;
   }
  }
 }
 if (!document.Q.type[0].checked && !document.Q.type[1].checked) {
  ers+="Не выбран способ расчёта\n";
  error++;
 }
 if (error>0) { window.alert (ers); return; }
 if (tx>0 && ty==0)  {
  if (document.Q.type[0].checked) { ty=Math.round(tx*sy/sx); document.Q.ty.value=ty.toString(); }
  else { ers+="При этом способе расчета нужно задать также целевую высоту\n"; error++; }
 }
 else if (tx==0 && ty>0)  {
  if (document.Q.type[0].checked) { tx=Math.round(ty*sx/sy); document.Q.tx.value=tx.toString(); }
  else { ers+="При этом способе расчета нужно задать также целевую ширину\n"; error++; }
 }
 else {
  if (document.Q.type[0].checked) {
   var newsx=Math.round(tx*sy/ty);
   var newsy=Math.round(sx*ty/tx);
   if (newsx==sx && newsy==sy) {
    window.alert ("Целевые размеры полностью пропорциональны исходным, ничего менять не нужно");
    return;
   }
   else if (equal_prop(sx,sy,tx,ty)) {
    window.alert 
     ("Целевые размеры соответствуют исходным с достижимой в целых числах точностью, улучшить соотношение нельзя");
    return; 
   }
   else {
    if (window.confirm("Целевые размеры не пропорциональны исходным\nИзменить целевую ширину (OK) или высоту (ОТМЕНА)?")) {
     tx=Math.round(ty*sx/sy); document.Q.tx.value=tx.toString();     
    }
    else { ty=Math.round(tx*sy/sx); document.Q.ty.value=ty.toString(); }
   }
  }
  else {
   var dw=sx/tx; var dh=sy/ty;
   if (dw<dh) { 
    var tx0=tx; tx=Math.round(ty*sx/sy); document.Q.tx.value=tx.toString(); 
    var left = Math.round(Math.abs(tx0-tx)/2);
    var s="Слева и справа обрезано по "+left+" пикс.";
    if ((tx0-tx)%2) s="Слева/справа обрезано "+left+"/"+Math.floor(left-1)+" пикс.";
    if (left) window.alert (s);
    else window.alert 
     ("Целевые размеры пропорциональны исходным с достижимой в целых числах точностью, улучшить соотношение нельзя");
    return;
   }
   else if (dw>dh) { 
    var ty0=ty; ty=Math.round(tx*sy/sx); document.Q.ty.value=ty.toString();
    var left = Math.round(Math.abs(ty0-ty)/2);
    var s="Сверху и снизу обрезано по "+left+" пикс.";
    if ((ty0-ty)%2) s="Сверху/снизу обрезано "+left+"/"+Math.floor(left-1)+" пикс.";
    if (left) window.alert (s);
    else window.alert 
     ("Целевые размеры пропорциональны исходным с достижимой в целых числах точностью, улучшить соотношение нельзя");
    return;
   }
   else {
    window.alert ("Целевые размеры пропорциональны исходным, ничего обрезать не нужно");
    return;
   }
  }
 }
 if (error>0) { window.alert (ers); return; }
}
</script>
<noscript>Извините, для работы приложения нужен включённый в браузере Javascript</noscript>
<div align="center"><form name="Q">
<table border="1" cellpadding="2" cellspacing="0">
<tr><td align="center">
<table border="0" align="center">
 <tr>
  <td align="right">Исходная&nbsp;ширина</td>
  <td><input type="text" name="sx" maxlength="4" size="4" onclick="this.select();"></td>
  <td>...и&nbsp;высота,&nbsp;пикс.</td>
  <td><input type="text" name="sy" maxlength="4" size="4" onclick="this.select();"></td>
 </tr><tr>
  <td align="right">Целевая&nbsp;ширина</td>
  <td><input type="text" name="tx" maxlength="4" size="4" onclick="this.select();"></td>
  <td>...и&nbsp;высота,&nbsp;пикс.</td>
  <td><input type="text" name="ty" maxlength="4" size="4" onclick="this.select();"></td>
 </tr>
 </tr><tr>
  <td align="left" valign="top" colspan="2">
   <input type="radio" name="type" value="1">Изменять&nbsp;размеры&nbsp;пропорционально
<br><input type="radio" name="type" value="2">Обрезать&nbsp;по&nbsp;большей&nbsp;стороне
  </td>
  <td align="right" valign="top" colspan="2">
   <INPUT TYPE="button" name="calc" VALUE="Вычислить" onClick="Main()">&nbsp;
   <INPUT TYPE="reset" name="reset" VALUE="Сброс">
  </td>
 </tr>
</table></td></tr></table></form></div>

01.11.2013, 14:59 [11359 просмотров]


теги: javascript софт графика сервис

К этой статье пока нет комментариев, Ваш будет первым