Pokazuje część obrazu przy użyciu css, ale jest responsywna z img-responsive
Stworzyłem system, w którym użytkownik przesyła obraz, zmienia jego rozmiar do określonej szerokości, a następnie może przyciąć obraz (używał imgAreaSelect, ale zaktualizował go do Jcrop, aby dodać użycie mobilne).
Mam to wszystko działa dobrze. Gdy użytkownik przesunie selektor Jcrop tam, gdzie chce i wybierze przycisk zapisywania Mam jQuery napisz trochę fantazyjnego CSS, aby pokazać część obrazu, którą chce użytkownik (reszta jest ukryta overflow: hidden
) plus więcej formularza, aby dodać kredyt do zdjęcia i inne informacje o zdjęciu.
To znowu działa świetnie ... na komputerze stacjonarnym. Obraz jest w pełnym rozmiarze na urządzeniu mobilnym i nie jest responsywny, więc nie widać większości zdjęcia. Od jakiegoś czasu próbuję to obejść (poza wyłączeniem zdjęcia podglądu). Czy jest jakiś sposób, aby moja metoda była responsywna?
$(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();
});
Odpowiedzi
Używanie CSS do przycinania obrazu działało dobrze na komputerach stacjonarnych, które były szersze niż sam obraz, ale podczas responsywnej zmiany rozmiaru obrazu jest to prawie niemożliwe ze względu na stale zmieniające się szerokości i wysokości obrazu w zależności od urządzenia.
Zamiast; Zwróciłem się do JavaScript, który faktycznie przycina obraz do żądanej szerokości i wysokości oraz żądanej lokalizacji, określonej przez Jcrop, który następnie nie ma problemu z używaniem img-responsive
do zmiany rozmiaru obrazu na urządzenie mobilne.
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;
}
Oryginalna odpowiedź zawierająca ten fragment: https://stackoverflow.com/a/36436245/956106