裁剪刚刚添加了一张图片

Question

我正在使用 Arnold Daniels 的文件输入预览 bootstrap-fileinput.js。并由 Kelly Hallman 裁剪 jquery.Jcrop.js。

bootstrap-fileinput 用于实时预览刚刚选择的图像，插入图像src 编码数据 URL。像这样data:image/png;base64,iVBORw.......

当用户选择照片并获得实时预览时，我想让他们裁剪该图像。我尝试使用一个附加按钮来做到这一点：当用户选择图像时，他们将获得实时预览，并且当他们单击按钮“裁剪”时，刚刚添加的图像将初始化 Jcrop 脚本。 ($img_wrapper.find('img').Jcrop({});)。它工作正常，一切正常。

但是当我尝试做同样的事情时，没有按“裁剪”按钮，而是在选择文件后自动执行，它不起作用。据我了解，jQuery 看不到新图像。
我尝试了事件on.('click', func...，但它不起作用。然后我在文档 (http://jasny.github.io/bootstrap/javascript/#fileinput) 中发现 Jcrop 提供了她自己的听众 on.('change.bs.fileinput', funct... 但它仍然不起作用。所以按钮“裁剪”可以正常工作，自动不起作用，为什么？

---

所以，它是这样工作的： （尝试选择图像，按“裁剪”，您可以裁剪图像） http://jsfiddle.net/8f44yo9v/2/

但是那样做是行不通的： http://jsfiddle.net/o7tbr6mo/

Answer 1

找到（不是最好的）解决方案来做到这一点。

在库 bootstrap-fileinput.js 的第 86 行，声明了变量 var $img = $('<img>')，这是图像 DOM，它将像缩略图一样添加以进行实时预览。所以最后，我们可以为该图像添加初始化。

if (window.location.pathname == '/add_tour') {
      $img.Jcrop({
        aspectRatio: 16/9,
        bgColor: '#3598DC',
        setSelect: [$img.width(), 0, 0, 0],
        minSize: [250, 0]
      });
    }

它会起作用的。但我认为，在引导库中更改代码并不是最好的主意。但是从该文件中获取 $img 对象，到其他 JS 代码，我不知道如何。

Answer 2

当 bootstrap-fileinput 触发“change.bs.fileinput”时，图像元素尚未创建。

你可以创建一个循环来等待元素：

$('input[type="file"]').on('change.bs.fileinput', function () {
    var checkExist = setInterval(function () {
        if ($('.fileinput-preview img').length) {
            $('.fileinput-preview img').Jcrop({});
            clearInterval(checkExist);
        }
    }, 100);
});

PS：如果没有创建元素，您可以检查无限循环。