調整圖片大小可讓用戶設置寬度或高度，javascript計算並填充寬度或高度

Question

我已經在網上搜尋過，發現只有部分解決方案能夠解決大部分不完整的問題。

我希望用戶能夠將圖像重新縮放到選定的尺寸。 這將使用帶有2個文本框的窗體，其中一個文本框表示寬度，一個文本框表示高度。

可以說圖像為1000Wx2000H，用戶想要縮放到100Wx200H，這很容易，但是如果他想縮放到125W x A，其中A是“高度”的未知值。 因此，用戶將在寬度文本框中輸入125，而javascript將計算出H文本框，反之亦然，用戶將填寫高度和寬度。

也有一個忽略寬高比復選框的超級好，它會自行選擇寬度和高度！

我可以很容易地用PHP獲取圖像尺寸，實際上，我需要將結果發布回頁面，以便用php將其發送給imagemagick。

我想我不是第一個想要這樣的東西的人，但沒有找到對搜索有用的東西。

我並沒有聲稱自己是JS專家，但是有時這是必要的。 另一方面，PHP似乎更自然。

Answer 1

為了使其有效，我們必須首先計算實際圖像的縱橫比，然后根據給定值計算width或height 。 我們可以利用Image元素的naturalHeight和naturalHeight屬性來計算縱橫比。

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`;
  }
}

實戰-https: //jsitor.com/tFBo8_F1V

Answer 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 POST完美地傳遞了jcrop的變量

我還添加了高度和寬度尺寸（我將它們設置為PHP變量，然后如果我想為每個圖像計算它們並從php設置它們）

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

用戶已經可以覆蓋計算的方面。 如果用戶設置了寬度和高度，則可以覆蓋高度，因此我選擇始終使用“！” 忽略imagemagick中的Aspect選項，因為javascript已經在計算正確的寬高比，因此可以覆蓋它，並且用戶看到的值正是最終圖像中的值。

我看到的唯一問題是，如果我在第一次加載時在jcrop中加載圖像就可以了。 但是在緊接的后續加載中，有時我會看到兩個圖像，首先是原始大小，然后是設置大小。 如果我在第二次或第三次加載之間加載另一張圖像，問題就消失了。 聽起來有些東西沒有清除或沖洗掉。 這種情況發生在Chrome和Firefox中。 但是，我看到其他人也有同樣的問題。