0

我正在使用bootstrap-fileinput.jsArnold Daniels 的文件输入预览。并由凯利·霍尔曼（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）中找到，但它仍然不起作用。所以按钮“裁剪”工作正常，自动不起作用，为什么？Jcropon.('change.bs.fileinput', funct...

所以，这样就可以了：（尝试选择图像，按“裁剪”，你可以裁剪图像） http://jsfiddle.net/8f44yo9v/2/

但那样，不起作用：http: //jsfiddle.net/o7tbr6mo/

4

2 回答 2

0

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

在 librarybootstrap-fileinput.js中，在第 86 行，声明了 variable 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 代码，我不知道如何。

于 2015-04-18T11:49:01.980 回答
0

当引导文件输入触发“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：如果未创建元素，您可以检查无限循环。

于 2015-07-27T20:01:06.953 回答