Crop 刚刚添加了一张图片

Question

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

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

当用户 select 拍摄照片并获得实时预览时，我想让他们裁剪该图像。我试着用一个额外的按钮来做到这一点：当用户选择一个图像时，他们会得到一个实时预览，当他们点击按钮 "crop" 时，然后对于刚刚添加的图像将初始化 Jcrop 脚本. ($img_wrapper.find('img').Jcrop({});)。一切正常。

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

所以，它是这样工作的：（尝试select图像，按"crop"，你可以裁剪图像） 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]
      });
    }

它会起作用的。但我认为，更改 bootstrap 库中的代码并不是最好的主意。但是从该文件获取 $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：如果元素未创建，您可以检查无限循环。

Crop 刚刚添加了一张图片

Crop just added a picture

jquery

image

live-preview

jcrop

twitter-bootstrap