Pokazuje część obrazu przy użyciu css, ale jest responsywna z img-responsive

Dec 06 2020

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

DawsonIrvine Dec 06 2020 at 22:43

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-responsivedo 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