Mostrando uma parte de uma imagem usando css, mas tendo-a responsiva com img-responsive
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
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-responsive
para 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