我正在将裁剪工具集成到我的应用程序中。 (Jcrop)
我将以下 JavaScript 集成到页面中:
$(function() {
$("#imgInp").change(function(){
readURL(this);
});
});
function update_crop(coords) {
var rx = 100/coords.w;
var ry = 100/coords.h;
$('#preview').css({
width: Math.round(rx * 760) + 'px',
height: Math.round(ry * 1000) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
}
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#cropbox').attr('src', e.target.result);
$('#preview').attr('src', e.target.result);
$('#cropbox').Jcrop({
onChange: update_crop,
onSelect: update_crop,
setSelect: [0, 0, 500, 500],
aspectRatio: 10 / 13.15
});
}
reader.readAsDataURL(input.files[0]);
}
}
在我的 HTML 中,我有以下内容:
<h1>Image to load</h1>
<form id="form1" runat="server">
<input type='file' id="imgInp" />
</form>
<img id="cropbox" src="#" alt="your image">
<h4>Preview:</h4>
<div style="width:100px; height:100px; overflow:hidden">
<img id="preview" src="#" alt="your image">
</div>
所以基本上我让用户可以上传图片,然后让他可视化要裁剪的区域。
问题是,当我加载第一张图片时,它很好,但是当我第二次加载另一张图片时,它在 img#cropbox
元素中没有改变。
所以基本上 $('#cropbox').Jcrop
事件是在浏览器更改 $("#cropbox").attr('src',e.target.结果)
如何确保仅当 $("#cropbox").attr('src',e.target. result)
被执行并且图像已完全加载?
最佳答案
图像元素也有一个加载事件。在设置 src
属性之前,将该函数包装在该图像上的加载事件回调中。
$('#cropbox').load(function(){
$('#cropbox').Jcrop({
onChange: update_crop,
onSelect: update_crop,
setSelect: [0, 0, 500, 500],
aspectRatio: 10 / 13.15
});
});
$('#cropbox').attr('src', e.target.result);
关于javascript - 如何确保图像已完全加载到 DOM 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35161889/