Question

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

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

当用户选择照片并进行实时预览时，我想让他们裁剪该图像。我尝试使用其他按钮执行此操作：当用户选择图像时，他们会获得实时预览，当他们点击按钮＆＃34;裁剪＆＃34;时，只需添加图片即可初始化{ {1}}脚本。（Jcrop）。它运作良好。

但是当我尝试做同样的事情时，没有按下＆＃34; crop＆＃34;按钮，但在文件选择后自动，它不起作用。据我了解，jQuery没有看到新的图像我尝试了事件$img_wrapper.find('img').Jcrop({});并且它不起作用。然后我在文档（http://jasny.github.io/bootstrap/javascript/#fileinput）中发现on.('click', func...提供了自己的监听器Jcrop，但它仍然不起作用。所以用按钮＆＃34; crop＆＃34;工作正常，自动不起作用，为什么？

所以，它的工作原理如下：（尝试选择图像，按＆＃34;裁剪＆＃34;，然后你可以裁剪图像） 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触发＆＃34; change.bs.fileinput＆＃34;时，尚未创建image元素。

您可以创建一个等待元素的循环：

$('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刚刚添加了一张图片

2 个答案: