javascript - 使用 Jcrop 调整图像大小

Question

我使用 Jquery Jcrop 裁剪我的图像。现在我正在实现一个用于调整图像大小的 slider 。我希望在同一页面上进行裁剪和调整大小。

我是这样做的:

$(document).ready(function() {


    var img = $('#cropbox')[0]; // Get my img elem
    var orgwidth, orgheight;
    $("<img/>") // Make in memory copy of image to avoid css issues
        .attr("src", $(img).attr("src"))
        .load(function() {
            orgwidth = this.width;   // Note: $(this).width() will not
            orgheight = this.height; // work for in memory images.
        });

    $('#cropbox').Jcrop({
        onSelect: updateCoords
    });

    $("#imageslider").slider({
        value: 100,
        max: 100,
        min: 1,
        slide: function(event, ui) {
            //$('ul#grid li').css('font-size',ui.value+"px");
            resizeImage(orgwidth, orgheight);
        }
    });

});

还有我简单的 resizeImage 函数:

function resizeImage(orgwidth, orgheight) {
    var value = $('#imageslider').slider('option', 'value');
    var width = orgwidth * (value / 100);
    var height = orgheight * (value / 100);
    $('#cropbox').width(width);
    $('#cropbox').height(height);
    $('#tester').val("org: "+orgwidth+" now: "+width);
}

问题是，一旦我打开 Jcrop，我就无法调整图像的大小。如何同时使用这两个功能？

Answer 1

我最终在调整大小时破坏了 jCrop，并在调整大小时将其放回原处。不管怎么说，还是要谢谢你。代码:

        function resizeImage(orgwidth, orgheight) {
        jcrop_api.destroy();

        var value = $('#imageslider').slider('option', 'value');
        var width = orgwidth * (value / 100);
        var height = orgheight * (value / 100);
        $('#cropbox').width(width);
        $('#cropbox').height(height);
        $('#rw').val(width);
        $('#rh').val(height);

        initJcrop();

    }