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

ProgramBox

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

Post author:admin
Запись опубликована:27 мая, 2023
Post category:Вопросы по программированию

#javascript #image-processing

#javascript #обработка изображений

Вопрос:

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

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

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

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

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

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

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

1. Всякий раз, когда вы устанавливаете только ширину, вы хотите установить высоту с сохранением соотношения сторон? Также вам нужно решение на PHP или JS?

2. какое условие для вычисления h

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

4. брк, я могу получить все данные изображения и вычисления на PHP и без проблем перенести их в javascript. Что мне нужно, так это как заставить поле автоматически заполняться шириной или высотой, как только задано другое. Очень приятно иметь возможность устанавливать и то, и другое с помощью кнопки «игнорировать соотношение сторон».

Ответ №1:

Чтобы заставить это работать, мы должны сначала вычислить соотношение сторон фактического изображения, а затем вычислить 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=compressamp;cs=tinysrgbamp;dpr=2amp;h=750amp;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`;
  }
}

Жить в действии — https://jsitor.com/tFBo8_F1V

1. Это не совсем то, что я ищу, поскольку ввод ширины не отображает высоту без нажатия «применить». Это было бы то же самое, что делать все это в PHP и отправлять данные обратно и вычислять высоту. Я хочу увидеть вычисленную высоту в текстовом поле, как только я введу ширину.

2. Ashvin777, я ценю вашу помощь, но, посмотрев на это, я понятия не имею, как заставить «применить» опубликовать это в том же документе *resize.php «. Я считаю, что это единственный способ вернуть их в php в любом случае. Как мне заставить переменные javascript отправлять обратно в PHP, заставляя «применить» выполнять публикацию??

3. Также не знаю, как остановить JS от изменения размера изображения в этом. Здесь точно не JS guiy. Для меня это никогда не имело смысла. Также firefox показывает округленные числа, в то время как chrome выдает мне много цифр за пределами десятичной дроби. числа необходимо округлять до целых чисел

4. Ashvin777, я справился с округлением в этом. Я изменил let height = … на let height = (Math.round(width * aspectRatio)); и то же самое для width . Все еще понятия не имею, как заставить кнопку apply стать формой отправки, предпочтительно методом GET

5. Если вы хотите выполнить вызов POST, вы можете передать значения naturalHeight и naturalWidth в вызове API и больше, если требуется. Для получения дополнительной информации вы можете проверить это — developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Ответ №2:

Работа с сообщением 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));

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

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

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

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

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