javascript 调整使用 Jcrop 的图像大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6229527/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resize image which uses Jcrop
提问by
I use the Jquery Jcrop for cropping my images. Now I'm implementing a slider for resizing the image. I want the cropping and resizing to happend on the same page.
我使用 Jquery Jcrop 来裁剪我的图像。现在我正在实现一个用于调整图像大小的滑块。我希望裁剪和调整大小发生在同一页面上。
I do it like this:
我这样做：
$(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);
}
});
});
And my simple resizeImage function:
还有我简单的 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);
}
The problem is that, as soon I turn on Jcrop I can't resize the image. How can I use both these functions at the same time?
问题是，一旦我打开 Jcrop，我就无法调整图像大小。如何同时使用这两个功能？
回答by
I ended up destroying the jCrop while resizing and putting it back on after resize. Thanks anyway. Code:
我最终在调整大小时破坏了 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();
}
回答by Hermann Bier
I had the same task to accomplish: resize the image with a slider where jCrop is applied. There are some more elements you have to resize also that jCrop created, not only the image. I ended up patching the jCrop plugin and here is the patch for latest jCrop-0.9.10.
我要完成相同的任务：使用应用了 jCrop 的滑块调整图像大小。还有一些你必须调整jCrop创建的元素的大小，不仅仅是图像。我最终修补了 jCrop 插件，这是最新 jCrop-0.9.10 的修补程序。
Patch your jCrop. If you don't know how to apply the patch, just put the resizeImage function to line 1578 of jCrop (unimified version ofcourse):
修补您的 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);
+ });
}
};
Get the jCrop API:
获取 jCrop API：
var jCropApi;
$('#photo').Jcrop({}, function()
{
jCropApi = this;
});
Calc new height and width. If your are doing it with a slider, let the slider say return the new width of the image and you calculate new height with aspect ratio of the image:
计算新的高度和宽度。如果您使用滑块执行此操作，请让滑块返回图像的新宽度，然后使用图像的纵横比计算新高度：
var aspectRatio = width / height;
// newWidth returned by slider
var newHeight = Math.round(width / aspectRatio);
jCropApi.resizeImage(newWidth, newHeight);
There are some other points to keep an eye on. After each resize your should look that crop area is still in the viewport of the image. If you need i could post the complete source how i've done it for me: jCrop + jquery ui slider to resize the image.
还有一些其他点需要注意。每次调整大小后，您应该看到裁剪区域仍在图像的视口中。如果您需要，我可以发布完整的源代码，我是如何为我完成的：jCrop + jquery ui 滑块调整图像大小。
Regards
问候
回答by CupOfJoe
What you can also do is make use of the setImage function of Jcrop, when the slider changes, call the setImage with the Jcrop api and set new width and height values like this:
您还可以使用 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);
}
});
What I am not sure about this technique is if it is the best solution because everytime you call the setImage function, jcrop creates a new Image object.
我不确定这种技术是否是最好的解决方案，因为每次调用 setImage 函数时，jcrop 都会创建一个新的 Image 对象。
回答by Anders Ilenkop
As an extension to Hermann Bier answer, i have added the jquery animation. The resizing looks way better when it's animated :)
作为 Hermann Bier 答案的扩展，我添加了 jquery 动画。动画时调整大小看起来更好:)
Implemented in Jcrop version: jquery.Jcrop.js v0.9.12
在 Jcrop 版本中实现：jquery.Jcrop.js v0.9.12
Locate the code:
找到代码：
ui: {
holder: $div,
selection: $sel
}
in jquery.Jcrop.js around line 1573 and replace it with:
在 1573 行附近的 jquery.Jcrop.js 中并将其替换为：
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);
});
*/
}
Call to the function will animate the resize. Feel free to delete the code between /* */ - I just kept it as an reference
调用该函数将动画调整大小。随意删除 /* */ 之间的代码 - 我只是保留它作为参考
Happy Coding :)
快乐编码:)
回答by afaolek
If what you want is that the resizing should be proportional, I don't think you need the slider (since it seems to be incompatible with jCrop). You could use jCropand in the onChangeevent, ensure the proportionality (that is, implement the resizeImagefunction, modified).
That's what I think.
如果您想要的是调整大小应该成比例，我认为您不需要滑块（因为它似乎与jCrop不兼容）。您可以使用jCrop并在onChange事件中，确保比例性（即实现resizeImage函数，修改）。
那就是我所想的。
