Изменение размера изображения имеет пользовательские ширину или высоту Javascript рассчитать и заполнить ширину или высоту

Question

Я искал в Интернете и нашел только частичные решения, которые в основном неполные.

Я хочу, чтобы пользователь мог масштабировать изображение до выбранного размера.При этом использовалась бы форма с 2 текстовыми полями, одним для ширины и одним для высоты.

Допустим, изображение имеет размер 1000Wx2000H, а пользователь хочет изменить масштаб до 100Wx200H, это легко, но если он хочет масштабировать до 125W x Aгде A - неизвестное значение высоты.Таким образом, пользователь вводит 125 в текстовом поле ширины, а javascript вычисляет текстовое поле H, или наоборот, пользователь заполняет высоту и ширину.

Очень приятно иметь флажок игнорирования пропорции, который бывыберите его ширину и высоту!

Я могу достаточно легко получить размеры изображения в PHP, и на самом деле мне нужно отправить результат обратно на страницу, чтобы получить его в php для отправки в imagemagick.

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

Я не претендую на звание эксперта JS, но иногда это необходимо.PHP с другой стороны, казалось, пришел более естественно.

Answer 1

Работа с поста Ashvin777

Изменено на

$("#crop_x").val(Math.round(cropbox.x));
$("#crop_y").val(Math.round(cropbox.y));
$("#width").val(Math.round(cropbox.w));
$("#height").val(Math.round(cropbox.h));

Я также обнаружил, что мне не нужен JOST-пост Javascript или что-то особенное.Обычный HTML POST отлично передавал переменные из jcrop

Я также добавил размеры высоты и ширины (я устанавливаю их как переменные PHP, затем, если я хочу, я могу рассчитать их для каждого изображения и установить их из php)

$(function() {
    $('#cropbox').Jcrop({ boxWidth: <?php echo $boxwidth;?>, boxHeight: <?php echo $boxheight;?> });
});

Пользователь уже может переопределить вычисленный аспект.Если пользователь устанавливает ширину и высоту, то высоту можно переопределить, поэтому я решил всегда использовать «!»игнорируйте параметр аспекта в imagemagick, потому что javascript уже вычисляет правильный аспект, и таким образом он может быть переопределен, и значения, которые видит пользователь, являются именно тем, что получится в конечном изображении.

Единственная проблема, которую я вижу, состоит в том, что если язагрузить изображение в jcrop при первой загрузке это нормально.Однако при немедленной последующей загрузке я иногда вижу два изображения: сначала оригинальный размер, а затем установленный размер.Если я загружаю другое изображение между загрузками во второй или третий раз, проблема исчезает.Похоже, что-то не очищается или не смывается.это происходит в Chrome и Firefox.Однако я вижу, что у других такая же проблема.

Answer 2

Чтобы заставить его работать, мы должны сначала вычислить соотношение сторон фактического изображения, а затем вычислить width или height на основе заданного значения.Мы можем использовать свойства naturalHeight и naturalHeight элемента Image для вычисления соотношения сторон.

let naturalHeight = $img.naturalHeight;
let naturalWidth = $img.naturalWidth;
let aspectRatio = naturalHeight/naturalWidth;

let height = width*aspectRatio;
$heightInput.value = height;

Приведенное выше решение вычислит высоту на основе заданного значения ширины.Вот полное решение -

<input type="number" id="h" placeholder="Enter height..." onblur="calculateWidth(this.value)">

<input type="number" id="w" placeholder="Enter width..." onblur="calculateHeight(this.value)">


<button onclick="apply()">
  Apply
</button>

<p>
<img id="img" src="https://images.pexels.com/photos/707194/pexels-photo-707194.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
</p>

let $img = document.getElementById('img');
let $heightInput = document.getElementById('h');
let $widthInput = document.getElementById('w');

function calculateHeight(width){
  let naturalHeight = $img.naturalHeight;
  let naturalWidth = $img.naturalWidth;
  let aspectRatio = naturalHeight/naturalWidth;

  let height = width*aspectRatio;
  $heightInput.value = height;
}

function calculateWidth(height){
  let naturalHeight = $img.naturalHeight;
  let naturalWidth = $img.naturalWidth;
  let aspectRatio = naturalWidth/naturalHeight;

  let width = height*aspectRatio;
  $widthInput.value = width;
}

function apply(){

  let height = $heightInput.value;
  let width = $widthInput.value;

  if(height > 0){
    $img.style.height = `${height}px`;
  } else {
    $img.style.height = `auto`;
  }

  if(width > 0){
    $img.style.width = `${width}px`;
  } else {
    $img.style.width = `auto`;
  }
}

Live in action - https://jsitor.com/tFBo8_F1V