javascript - 随 SRC 变化的动态纵横比
问题描述
我的问题是,在选择初始图像文件并尝试选择另一个图像文件后,纵横比不会相对于所选图像发生变化,而是保持首先选择的图像的纵横比。
我希望纵横比相对于所选图像的自然纵横比动态变化。我想不出一种方法来修复它而不会丢失可调整大小的部分。
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>
解决方案
问题在于,可调整大小的小部件仅在实例化时读取内容的尺寸,而不是在内容更改时读取。
要解决此问题,您需要检查可调整大小的小部件是否已在元素上实例化并销毁它,同时删除小部件添加到元素的任何内联样式。然后您可以更改图像并再次重新初始化小部件。
另请注意,如果您使用 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>
推荐阅读
- python - 如何使缺失的变量自动创建?
- log4net - 每个插件的 Log4Net 单独配置
- angular - 如何使用角度过滤管而不是匹配值的单词来获得准确的单词?
- php - 为什么当我要求通过增加订购表时它是随机的
- sql - 有没有办法将 JSON 对象数组与其他一些其他视图/表中的另一个 JSON 对象数组合并?
- sql - 排除基于特定字符串文本的记录
- function-pointers - 如何在 Vala 中创建指向函数的指针?
- sql - 有没有办法计算 DB2 中不同列和行之间的值差异
- html - 如何将元素的高度扩展到 100vh 以上以包含整个可滚动区域?
- git - 如何在 Git 2.23 中禁用“git checkout”?