Mostrando una parte de una imagen usando css pero haciéndola receptiva con img-responsive
He creado un sistema en el que un usuario cargará una imagen, se redimensionará a un cierto ancho y luego el usuario puede recortar la imagen (estaba usando imgAreaSelect pero se actualizó a Jcrop para agregar uso móvil).
Tengo todo esto funcionando bien. Una vez que el usuario mueve el selector de Jcrop a donde quiere y elige el botón de guardar, jQuery escribe un CSS elegante para mostrar la parte de la imagen que el usuario quiere (el resto se oculta a través de overflow: hidden
) además de más formularios para agregar crédito de foto y otros información sobre la foto.
De nuevo, esto funciona muy bien ... en un escritorio. La imagen es de tamaño completo en un dispositivo móvil y no responde, por lo que no puede ver la mayor parte de la foto. He estado tratando de entender esto por un tiempo (aparte de deshabilitar la foto de vista previa). ¿Hay alguna forma de que mi método responda?
$(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();
});
Respuestas
El uso de CSS para recortar la imagen funcionó bien para escritorios que eran más anchos que la imagen en sí, pero cuando se cambia el tamaño de la imagen de manera receptiva es casi imposible debido a los anchos y alturas siempre cambiantes de la imagen según el dispositivo.
En lugar; Recurrí a JavaScript que en realidad recorta la imagen al ancho y alto y a la ubicación deseada, establecida por Jcrop, que luego no tiene problemas img-responsive
para cambiar el tamaño de la imagen al dispositivo móvil.
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;
}
Respuesta original que contiene este fragmento: https://stackoverflow.com/a/36436245/956106