Mostrando uma parte de uma imagem usando css, mas tendo-a responsiva com img-responsive

Dec 06 2020

Eu criei um sistema onde um usuário irá carregar uma imagem, ela é redimensionada para uma certa largura e então o usuário pode cortar a imagem (estava usando imgAreaSelect, mas atualizou para Jcrop para adicionar uso móvel).

Eu tenho tudo funcionando bem. Depois que o usuário move o seletor de Jcrop para onde deseja e escolhe o botão Salvar, faço com que o jQuery escreva um CSS sofisticado para mostrar a parte da imagem que o usuário deseja (o resto é escondido overflow: hidden), mais forma para adicionar crédito da foto e outros informações sobre a foto.

Novamente, isso funciona muito bem ... em um desktop. A imagem está em tamanho real em um dispositivo móvel e não responde, então você não pode ver a maior parte da foto. Estou tentando entender isso há um tempo (além de desabilitar a visualização da foto). Existe alguma maneira de fazer meu método responsivo?

$(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();
});

Respostas

DawsonIrvine Dec 06 2020 at 22:43

Usar CSS para cortar a imagem funcionou bem para desktops que eram mais largos do que a própria imagem, mas ao redimensionar a imagem de forma responsiva é quase impossível devido às larguras e alturas sempre variáveis, dependendo do dispositivo.

Em vez de; Eu mudei para o JavaScript que realmente corta a imagem para a largura e altura e o local desejado, definido pelo Jcrop que, então, não tem problemas img-responsivepara redimensionar a imagem para o dispositivo móvel.

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;
}

Resposta original contendo este snippet: https://stackoverflow.com/a/36436245/956106