调整使用Jcrop的图片大小

Question

我使用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);
        }
    });

});

以下是我简单的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，就无法调整图像大小。如何同时使用这两个功能？

- user328146

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

    }

- user328146

Answer 2

我有同样的任务要完成：使用滑块调整应用了jCrop的图像大小。你还需要调整其他由jCrop创建的元素，而不仅仅是图像。最终，我修补了jCrop插件，并为最新版本jCrop-0.9.10提供了补丁。

请打补丁您的jCrop。如果您不知道如何应用补丁，请将resizeImage函数放入jCrop的第1578行（未压缩版本）中：

--- /home/dr0bz/Desktop/jquery.Jcrop.js
+++ /home/dr0bz/workspace/profile_tuning/js/lib/jquery.Jcrop.js
@@ -1573,6 +1573,15 @@
       ui: {
         holder: $div,
         selection: $sel
+      },
+      
+      resizeImage: function(width, height) {
+        boundx = width;
+        boundy = height;
+        $([$img2, $img, $div, $trk]).each(function(index, element)
+        {
+          element.width(width).height(height);
+        });
       }
     };

获取jCrop API：

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 + jquery ui滑块来调整图像大小的。

敬礼

- German

---

使用这个作为基础，我已经在这里提交了一个拉取请求：https://github.com/tapmodo/Jcrop/pull/69 - homerjam

谢谢！工作得很好。 - user706420

Answer 3

你还可以使用Jcrop的setImage函数，在滑块改变时，使用Jcrop api调用setImage并设置新的宽度和高度值，像这样：

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都会创建一个新的Image对象。

- CupOfJoe

Answer 4

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

- afaolek

Answer 5

作为对 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);
    });
    */
  }

调用该函数将会使大小调整动画化。 可以随意删除 /* */ 之间的代码 - 我只是将其保留作为参考

编程愉快 :)

- Anders Ilenkop