Поскольку jcrop теперь работает на сенсорных экранах, я хочу использовать веб-приложение, которое его использует. У меня есть все, что работает над этим, но если я попытаюсь сделать отзывчивый дизайн так, чтобы пользователь мог видеть все изображение перед обрезкой (ширина в процентах от экрана), то обрезанная область будет не такой, как выбранная Пользователь. Координаты выбора, сделанные поверх изображения с измененным размером, не будут соответствовать координатам на полном размере.
Jcrop включает решение подобной проблемы (при обработке огромных изображений) с использованием размера окна или метода truesize, но ни одна из них не работает, если ширина изображения основана на процентах, а не на заданной ширине в пикселях.
Единственное решение, о котором я могу думать, - это изменить размер изображения с помощью медиа-запросов и сделать 3 или 4 версии в зависимости от ширины экрана, но я предпочел бы придерживаться изменения в процентах, потому что он выглядит намного лучше.
Это мой вызов jcrop:
var jcrop_api, boundx, boundy;
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: 0.75
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
trueSize: [900,600],
// Store the API in the jcrop_api variable
jcrop_api = this;
});
function updatePreview(c){
if (parseInt(c.w) > 0){
var rx = <?echo $width;?> / c.w;
var ry = <?echo $height;?> / c.h;
$('#preview').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};