裁剪刚刚添加了一张图片

Posted 2023-02-25

【中文标题】裁剪刚刚添加了一张图片

【英文标题】：Crop just added a picture

【发布时间】：2015-04-17 15:33:00

【问题描述】：

我正在使用 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/

【问题讨论】：

对于动作$(#file-input).on('change', funct... 相同的结果，不要为刚刚添加的图像初始化裁剪。

【参考方案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 代码，我不知道如何。

【参考方案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：如果没有创建元素，您可以检查无限循环。

【讨论】：

我喜欢这种方法，但是一旦我上传了超过 85 像素高的图像，它会立即（嗯，在几分之一秒内）将其压缩到 85 像素的高度。为什么？