Динамическое соотношение сторон с изменением 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>