Javascript 使用Jcrop调整图像大小

我使用Jquery Jcrop裁剪图像。现在，我正在实现一个用于调整图像大小的滑块。我希望裁剪和调整大小发生在同一页上

我是这样做的：

$(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);
        }
    });

});

var jcrop_api;

$('#cropbox').Jcrop({
    onSelect: updateCoords
}, function() {
    jcrop_api = this;
});

$("#imageslider").slider({
    value: 100,
    max: 100,
    min: 1,
    slide: function(event, ui) {
        var value = $('#imageslider').slider('option', 'value');
        var width = orgwidth * (value / 100);
        var height = orgheight * (value / 100);
        jcrop_api.setImage($(img).attr("src"), function() {
            this.setOptions({
                boxWidth: width,
                boxHeight: height
            });
        });
        $('#tester').val("org: "+orgwidth+" now: "+width);
    }
});

---

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

如果您希望调整大小成比例，我认为您不需要滑块（因为它似乎与jCrop不兼容）。您可以使用jCrop并在onChange事件中确保比例性（即，实现resizeImage函数，已修改）。

---

这就是我的想法。

我在调整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();

    }

---

我有同样的任务要完成：在应用jCrop的地方使用滑块调整图像大小。jCrop创建的还有一些元素需要调整大小，不仅仅是图像。我最后修补了jCrop插件，下面是最新jCrop-0.9.10的补丁

修补你的jCrop。如果您不知道如何应用修补程序，只需将resizeImage函数放到jCrop（当然是unimified版本）的第1578行即可：

获取jcropapi：

var jCropApi;
$('#photo').Jcrop({}, function()
{
  jCropApi = this;
});

计算新的高度和宽度。如果您使用的是滑块，请让滑块说“返回图像的新宽度”，然后使用图像的纵横比计算新高度：

var aspectRatio = width / height;
// newWidth returned by slider
var newHeight = Math.round(width / aspectRatio);
jCropApi.resizeImage(newWidth, newHeight);

还有其他几点需要注意。每次调整大小后，应确保裁剪区域仍在图像的视口中。如果您需要，我可以发布完整的源代码我是如何为我做的：jCrop+jqueryui滑块来调整图像大小

---

关于

您还可以使用Jcrop的setImage函数，当滑块更改时，使用Jcrop api调用setImage并设置新的宽度和高度值，如下所示：

$(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);
        }
    });

});

var jcrop_api;

$('#cropbox').Jcrop({
    onSelect: updateCoords
}, function() {
    jcrop_api = this;
});

$("#imageslider").slider({
    value: 100,
    max: 100,
    min: 1,
    slide: function(event, ui) {
        var value = $('#imageslider').slider('option', 'value');
        var width = orgwidth * (value / 100);
        var height = orgheight * (value / 100);
        jcrop_api.setImage($(img).attr("src"), function() {
            this.setOptions({
                boxWidth: width,
                boxHeight: height
            });
        });
        $('#tester').val("org: "+orgwidth+" now: "+width);
    }
});

---

我不确定这种技术是否是最好的解决方案，因为每次调用setImage函数时，jcrop都会创建一个新的图像对象。

作为Hermann Bier答案的扩展，我添加了jquery动画。 设置动画时，调整大小看起来更好：）

在Jcrop版本中实现：jquery.Jcrop.js v0.9.12

查找代码：

ui: {
    holder: $div,
    selection: $sel
  }

在jquery.Jcrop.js的第1573行附近 并将其替换为：

ui: {
    holder: $div,
    selection: $sel
  },
  resizeImage: function(width, height) {
    animationsTid = 500;
    boundx = width;
    boundy = height;

    $($img2).animate({
        width: width, 
        height: height,
    }, { duration: animationsTid, queue: false });

    $($img).animate({
        width: width, 
        height: height,
    }, { duration: animationsTid, queue: false });

    $($div).animate({
        width: width, 
        height: height,
    }, { duration: animationsTid, queue: false });

    $($trk).animate({
        width: width, 
        height: height,
    }, { duration: animationsTid, queue: false });

    /*
    //Old way of resizing, but without animation
    $([$img2, $img, $div, $trk]).each(function(index, element){
      element.width(width).height(height);
    });
    */
  }

调用该函数将设置调整大小的动画。 请随意删除/**/之间的代码-我只是将其作为参考

---

快乐编码：）

以此为基础，我在这里提交了一个请求：谢谢！工作得很好