使用 JCrop 裁剪多张图片

Posted 2023-02-25

【中文标题】使用 JCrop 裁剪多张图片

【英文标题】：Cropping Multiple Picture using JCrop

【发布时间】：2012-10-22 05:33:36

【问题描述】：

我使用JCrop 来裁剪图像。 JCrop 是一个图像裁剪插件。一个页面包含 3 个要裁剪的图像。

这就是我为 jcrop 初始化数组的方式：

var jcrop = [];

那么我有：

$('img.picture').each(function()
    imgcrop = $(this);
    imgcrop.Jcrop(
        bgColor: 'white',
        aspectRatio: 1
    , function()
        jcrop.push(this);
        );
);

问题是当我拥有jcrop[1].setImage( '/image/no-picture.jpg' ); 时，它有时会更改第一张或第三张图片。

$('div.deletePhoto a').bind('click', function(e)
    e.preventDefault();
    var index =$('div.deletePhoto').index($(this).parent());

    $.post('/deletePicture', function(data)
        alert(index);
        jcrop[index].setImage( '/image/no-picture.jpg' );
        jcrop[index].disable();
    );
);

变量index 可以，但jcrop[index] 不行。

html：

    <!-- pictures -->
    <div class="blu_3">
        <div class="imgWrapper">
            <img class="blu_10 picture" />
            <div class="delete deletePhoto"><a href="#" title="delete">[ x ]</a></div>
        </div>
        <input class="crop" type="button" value="crop" />
    </div>
    <div class="blu_3">
        <div class="imgWrapper">
            <img class="blu_10 picture" />
            <div class="delete deletePhoto"><a href="#" title="delete">[ x ]</a></div>
        </div>
        <input class="crop" type="button" value="crop" />
    </div>
    <div class="blu_3">
        <div class="imgWrapper">
            <img class="blu_10 picture" />
            <div class="delete deletePhoto"><a href="#" title="delete">[ x ]</a></div>
        </div>
        <input class="crop" type="button" value="crop" />
    </div>

我该如何解决？

【问题讨论】：

你是在循环中做的吗？也许如果你在循环之外做它会起作用？如果你只需要更改 jcrop[1] 图像

你能显示你使用 jcrop[1].setImage 的代码吗？

我的意思是它不在循环中，但我尝试在 jcrop 上进行迭代。

"它有时会改变第一张或第三张图片。" - 是什么意思的变化？而且看起来你设置了参数 blobkey - 他是对的吗？

blobkey 不是代码的一部分。我的意思是 jcrop 设置不正确。如果 index=1，我希望设置第二张图像，但有时不会。第一张或第三张图片，而不是第二张图片。

【参考方案1】：

$('img.picture').each(function()
    imgcrop = $(this);
    imgcrop.Jcrop(
        bgColor: 'white',
        aspectRatio: 1
    , function()

        jcrop.push($(this)); //the $(this) is important

        );
);

和

$('div.deletePhoto a').bind('click', function(e)
    e.preventDefault();

    var index = $('div.deletePhoto').index($(this).parent()); //return it to this

    $.post('/deletePicture', function(data)
        alert(jcrop[index].attr('id'));
        jcrop[index].setImage( '/image/no-picture.jpg' );
        jcrop[index].disable();
    );
);

html:

 <!-- pictures -->
    <div class="blu_3">
        <div class="imgWrapper">
            <img class="blu_10 picture" id="img_1" />
            <div class="delete deletePhoto"><a href="#" title="delete">[ x ]</a></div>
        </div>
        <input class="crop" type="button" value="crop" />
    </div>
    <div class="blu_3">
        <div class="imgWrapper">
            <img class="blu_10 picture" id="img_2" />
            <div class="delete deletePhoto"><a href="#" title="delete">[ x ]</a></div>
        </div>
        <input class="crop" type="button" value="crop" />
    </div>
    <div class="blu_3">
        <div class="imgWrapper">
            <img class="blu_10 picture" id="img_3" />
            <div class="delete deletePhoto"><a href="#" title="delete">[ x ]</a></div>
        </div>
        <input class="crop" type="button" value="crop" />
    </div>

所以我为每个 img 标签设置了一个 id="img_1"、id="img_2"、img="img_3"，上面的代码检查了它并且它工作正常，每个选择的图像都是正确的 id。 .

【讨论】：

我已经改过了。这是相同的。我得到了正确的索引值。

尝试提醒(jcrop[index].attr('id')) - 它会显示正确的 id，然后 setImage 会在您从 html 页面中选择的每个图像上正常工作跨度>