javascript - 随 SRC 变化的动态纵横比

Question

我的问题是，在选择初始图像文件并尝试选择另一个图像文件后，纵横比不会根据所选图像发生变化，而是保持首先选择的图像的纵横比。

我希望纵横比根据所选图像的自然纵横比动态变化。我想不出一种在不丢失可调整大小部分的情况下修复它的方法。

var test = document.getElementById('test');
var draggable = document.getElementById('draggable');
var resizable = document.getElementById('resizable');
var img = document.querySelector('img');

img.onload = function() {
  $(function() {
    $("#draggable").draggable({});
    $("#resizable").resizable({
      aspectRatio: img.naturalWidth / img.naturalHeight,
      maxHeight: 200,
      maxWidth: 200,
      minHeight: 20,
      minWidth: 20,
    });
  });
}

window.addEventListener('load', function() {
  document.querySelector('input[type="file"]').addEventListener('change', function() {
    if (this.files && this.files[0]) {
      img.src = URL.createObjectURL(this.files[0]);
    }
  });
});

#draggable {
  display: inline-block;
  margin: 0px;
}

#resizable {
  position: absolute;
  cursor: move;
  margin: 0px;
  max-height: 200px;
  max-width: 200px;
  box-sizing: border-box;
  border: none;
}

.test {
  width: 300px;
  height: 300px;
  overflow: hidden;
  background-color: beige;
}

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/cupertino/jquery-ui.css" rel="stylesheet" />
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input type='file' />

<div id='test' class='test'>
  <div id='draggable' class="ui-widget-content">
    <img id="resizable" class="ui-widget-content">
  </div>
</div>

Answer 1

问题是因为可调整大小的小部件仅在实例化时读取内容的尺寸，而不是在内容更改时读取。

要解决此问题，您需要检查可调整大小的小部件是否已在元素上实例化并销毁它，同时删除小部件添加到元素的任何内联样式。然后您可以更改图像并再次重新初始化小部件。

另请注意，如果您使用 jQuery 进行拖动和调整大小，那么充分利用它为选择 DOM 中的元素和添加事件处理程序所提供的便利是有意义的。试试这个:

$(function() {
  var $draggable = $('#draggable');
  var $resizable = $('#resizable');

  $('input[type="file"]').on('change', function() { 
    if (this.files && this.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
        $draggable.draggable();
        
        if ($resizable.hasClass('ui-resizable'))
          $resizable.resizable('destroy').removeAttr('style');
          
        $resizable.prop('src', e.target.result).resizable({
          maxHeight: 200,
          maxWidth: 200,
          minHeight: 20,
          minWidth: 20,
        });
      }
      reader.readAsDataURL(this.files[0]);
    }
  });
});

#draggable {
  display: inline-block;
  margin: 0px;
}

#resizable {
  position: absolute;
  cursor: move;
  margin: 0px;
  max-height: 200px;
  max-width: 200px;
  box-sizing: border-box;
  border: none;
}

.test {
  width: 300px;
  height: 300px;
  overflow: hidden;
  background-color: beige;
}

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/cupertino/jquery-ui.css" rel="stylesheet" />
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input type='file' />
<div id='test' class='test'>
  <div id='draggable' class="ui-widget-content">
    <img id="resizable" class="ui-widget-content">
  </div>
</div>