使用 css 显示图像的一部分，但使用 img-responsive 进行响应

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 设置，然后使用 Jcropimg-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;

}