Question

我正在将裁剪工具集成到我的应用程序中。（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.result)事件正在执行

如何确保$('#cropbox').Jcrop仅在执行$("#cropbox").attr('src',e.target.result)并且图像已满载时执行？

Answer 1

图像元素也有一个加载事件。在设置src属性之前，将该函数包装在该映像的load事件回调中。

$('#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);

Answer 2

尝试设置间隔轮询以查看新图像源是否与预期来源匹配。

在继续使用JCrop之前，新的图像源（实际）应与预期的图像源（您设置的图像源）匹配。

这是一个简化的例子：

function checkImageLoaded(newImg){

if (newImg == expectedImg){
     $('#cropbox').Jcrop({
        onChange: update_crop,
        onSelect: update_crop,
        setSelect: [0, 0, 500, 500],
        aspectRatio: 10 / 13.15
      });

      //clear the interval
      window.clearInterval(imageInterval);
  }
}

function pollImageSource() {

    //get the new Image source
    //set the expect Image source

    //then check if they match
    var imageInterval = setInterval(function(){ checkImageLoaded(newImageSource); }, 300);
}

有很多图像插件可以检测图像是否已加载，但我认为没有必要。

此外，David Walsh拥有更强大的投票机制。

https://davidwalsh.name/javascript-polling

摘录：

// Usage:  ensure element is visible
poll(function() {
    return document.getElementById('lightbox').offsetWidth > 0;
}, 2000, 150);

但这可能不起作用，因为您的图片已经加载。您将不得不大量修改该脚本以比较上面的图像源。

Answer 3

我认为你应该使用图片的onload事件。浏览器完成渲染图像时会触发它，每次图像发生变化时，它都会重新开始。

简单如点：

你可以用jQuery实现同样的目标： $（＆＃34; img＆＃34;）。on（＆＃34; load＆＃34;，function（）{....}）;

（早先的回答几乎是一样的，对不起）

如何确保图像在DOM中完全加载

3 个答案: