cssを使用して画像の一部を表示しますが、img-responseで応答します

Question

ユーザーが画像をアップロードし、特定の幅にサイズ変更してから、ユーザーが画像を切り抜くことができるシステムを作成しました（imgAreaSelectを使用していましたが、モバイルでの使用を追加するためにJcropにアップグレードしました）。

私はこれをすべてうまく機能させています。ユーザーがJcropのセレクターを目的の場所に移動し、保存ボタンを選択したら、jQueryに、ユーザーが必要とする画像の部分（残りはを介して非表示overflow: hidden）を表示するための凝ったCSSと、写真クレジットなどを追加するためのフォームを記述させます。写真に関する情報。

これもまた、デスクトップ上でうまく機能します。画像はモバイルデバイスではフルサイズであり、応答しないため、写真の大部分を見ることができません。私はしばらくの間、これに頭を包み込もうとしています（プレビュー写真を無効にする以外）。メソッドをレスポンシブにする方法はありますか？

$(document).on('click','#save-image',function() { //$('img.mobimg').imgAreaSelect({remove:true});
    //$('#the-image').fadeOut(); //Write the preview image using variables from image selector. $('#the-image').fadeOut().html('<div align="center"><div id="img" style="position: relative; width: '+$('#w').val()+'px; height: '+$('#h').val()+'px; overflow: hidden;">'+
                            '<img src="'+theimg+'" id="finished-image" style="position: absolute; top: -'+$('#y1').val()+'px; left: '+$('#x1').val()+'px;">'+
                          '</div></div><hr>').fadeIn(function() { $('#finished-image').addClass('img-responsive'); }); // Fade in form to allow user to finish adding details. $('.form-finish').fadeIn();
    // Fade in main form submit button to allow user to submit the completed form.
    $('.panel-footer').fadeIn();  // Final Submit Button to Fade In
    
    jcrop_api.destroy();
});

Answer 1

CSSを使用して画像をトリミングすることは、画像自体よりも幅の広いデスクトップでは問題なく機能しましたが、レスポンシブに画像のサイズを変更する場合、デバイスによって画像の幅と高さが常に変化するため、ほとんど不可能です。

代わりに; 私はJavaScriptを使用して、画像を実際に幅と高さ、および必要な場所にトリミングします。これはJcropによって設定されimg-responsive、モバイルデバイスに合わせて画像のサイズを変更するために問題なく使用できます。

function showPart(img, offsetTop, offsetLeft, width, height){
    var src = img.src;
    $(img).replaceWith("<canvas id='cnvs' class='img-responsive' style='max-width:100%;'></canvas>");
    var canvas = document.getElementById('cnvs');
    canvas.height = height;
    canvas.width = width;
    var ctx = canvas.getContext("2d");
    var img = new Image();
    img.onload = function(){
        ctx.drawImage(this, offsetLeft, offsetTop, width, height, 0, 0, width, height);
    };
    img.src = src;
}

このスニペットを含む元の回答： https://stackoverflow.com/a/36436245/956106