2009-11-15 7 views
2

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

Например, если пространство, в которое изображение должно быть изменено, составляет 100 ширины и 100 высоты, а изображение - 150 на 90, тогда его ширина должна быть уменьшена. Если изображение равно 80 на 160, тогда высота должна быть уменьшена.

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

jQuery.fn.resizeHeightMaintainRatio = function(newHeight){ 
if (this.aspectRatio == undefined) 
this.aspectRatio = parseInt($(this).width()/$(this).height()); 
$(this).height(newHeight); 
$(this).width(newHeight * this.aspectRatio); 
} 

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

 jQuery.fn.resizeMaintainRatio = function(newHeight, newWidth){ 
      widthRatio = parseInt($(this).width()/newWidth); 
      heightRatio = parseInt($(this).height()/newHeight); 

      if(heightRatio > widthRatio) 
      { 

       this.aspectRatio = parseInt($(this).css("width")/$(this).css("height")); 

       $(this).css("height", newHeight); 
       $(this).css("width", newHeight * this.aspectRatio); 

      } 
      else{ 

       this.aspectRatio = parseInt($(this).css("height")/$(this).css("width")); 

       $(this).css("width", newWidth); 
       $(this).css("height", newWidth * this.aspectRatio); 

      } 

     } 

ПРИМЕЧАНИЕ РАЗ: после того, как в дальнейшем использовать приведенный выше код работает очень странно, попробуйте это вместо этого - http://plugins.jquery.com/project/kepresize

+0

Не забудьте удалить эту строку: * если (this.aspectRatio == неопределенная) * –

ответ

3

Следующий код будет определять, какую сторону нужно масштабировать (работает с квадратами без квадратов, которые просто проверяют ширину и высоту не будут работать) и масштабируются в соответствии с этим.

Он также будет увеличивать изображение, если оно меньше, чем коробка newWidth * newHeight. Если вы не хотите, чтобы он увеличивался, когда я переключаю отношения, проверьте, равна ли ширина или высота> 1, а затем только масштаб.

Отказ от ответственности: код не был запущен, но концепция должна быть правильной.

EDIT Обновлено исправлениями OP.

jQuery.fn.resizeHeightMaintainRatio = function(newHeight, newWidth){ 
    widthRatio = parseInt($(this).width()/newWidth); 
    heightRatio = parseInt($(this).height()/newHeight); 
    if(widthRatio < 1 && heightRatio < 1){ 
     widthRatio = heightRatio; 
     heightRatio = widthRatio; 
    } 
    if(widthRatio > heightRatio){ 
     $(this).width(newWidth); 
     $(this).height(newHeight/widthRatio); 
    } else 
    { 
     $(this).height(newHeight); 
     $(this).width(newWidth/heightRatio); 
    } 
} 
+0

я редактировал ошибки из, но он по-прежнему не работает. – usertest

+0

О том, чтобы исправить это сейчас: никогда не пытайтесь кодировать, делая вещи для своей жены. Это не работает :) –

+0

Ничего, я видел, что ты это сделал. :) Я все равно обновлю –

1

Вы должны были бы проверить $(this).width() > $(this).height() Когда правда, вызовите width- версию этого кода, в противном случае назовем эту точную версию.

0

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

  • ширина Изменение размера и высоты без необходимости цикла
  • не превышает первоначальные размеры изображения
  • Использует математику, которая работает должным образом, т.е. ширина/аспект по высоте, а высота * аспект для ширины так изображений фактически масштабируется должным образом вверх и вниз:/

Должно быть прямо вперед достаточно, чтобы преобразовать в Javascript или других языках

//////////////

private void ResizeImage(Image img, double maxWidth, double maxHeight) 
{ 
    double srcWidth = img.Source.Width; 
    double srcHeight = img.Source.Height; 

    double resizeWidth = srcWidth; 
    double resizeHeight = srcHeight; 

    double aspect = resizeWidth/resizeHeight; 

    if (resizeWidth > maxWidth) 
    { 
     resizeWidth = maxWidth; 
     resizeHeight = resizeWidth/aspect; 
    } 
    if (resizeHeight > maxHeight) 
    { 
     aspect = resizeWidth/resizeHeight; 
     resizeHeight = maxHeight; 
     resizeWidth = resizeHeight * aspect; 
    } 

    img.Width = resizeWidth; 
    img.Height = resizeHeight; 
} 
Смежные вопросы