Отображение части изображения с использованием css, но с адаптивностью к img-responseive

Question

Я создал систему, в которой пользователь загружает изображение, его размер изменяется до определенной ширины, а затем пользователь может обрезать изображение (использовал imgAreaSelect, но был обновлен до Jcrop, чтобы добавить мобильное использование).

У меня все работает нормально. Как только пользователь перемещает селектор Jcrop туда, где он хочет, и выбирает кнопку сохранения, у меня есть jQuery для написания причудливого CSS, чтобы показать часть изображения, которую хочет пользователь (остальное скрыто через overflow: hidden), а также дополнительную форму для добавления фото кредита и других информация о фото.

Это снова отлично работает ... на рабочем столе. На мобильном устройстве изображение полноразмерное и не реагирует, поэтому вы не можете увидеть большую часть фотографии. Я уже некоторое время пытаюсь обдумать это (кроме отключения предварительного просмотра фото). Есть ли способ заставить мой метод реагировать?

$(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