jcropは現在タッチスクリーンで動作しているので、それを使用するWebアプリを作成したいと思います。私はすべてに取り組んでいますが、ユーザーがトリミングする前に画像全体を見ることができるようにデザインをレスポンシブにしようとすると（幅は画面のパーセンテージです）、トリミングされた領域はによって選択されたものと同じになりませんユーザー。サイズ変更された画像の上で行われた選択の座標は、フルサイズの画像の座標と一致しません。
Jcropには、ボックスサイズ設定またはトゥルーサイズ方式を使用することによる同様の問題（巨大な画像を処理する場合）の解決策が含まれていますが、画像の幅がピクセル単位の特定の幅ではなくパーセンテージに基づいている場合、これらはいずれも機能しません。
私が考えることができる唯一の解決策は、メディアクエリを使用して画像のサイズを変更し、画面の幅に応じて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);
};