我使用 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,我就无法调整图像的大小。如何同时使用这两个功能?
最佳答案
我最终在调整大小时破坏了 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();
}
关于javascript - 使用 Jcrop 调整图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6229527/