Anzeigen eines Teils eines Bildes mit CSS, aber mit Img-Responsive

Question

Ich habe ein System erstellt, in dem ein Benutzer ein Bild hochlädt, dessen Größe auf eine bestimmte Breite geändert wird und der Benutzer das Bild dann zuschneiden kann (er verwendete imgAreaSelect, wurde jedoch auf Jcrop aktualisiert, um die mobile Nutzung hinzuzufügen).

Ich habe das alles gut funktioniert. Sobald der Benutzer den Selektor von Jcrop an die gewünschte Stelle bewegt und die Schaltfläche Speichern wählt, muss jQuery ein ausgefallenes CSS schreiben, um den Teil des Bildes anzuzeigen, den der Benutzer haben möchte (der Rest wird über versteckt overflow: hidden), sowie weitere Formulare, um Fotokredite und andere hinzuzufügen Informationen zum Foto.

Dies funktioniert wieder großartig ... auf einem Desktop. Das Bild ist auf einem mobilen Gerät in voller Größe und reagiert nicht, sodass Sie den größten Teil des Fotos nicht sehen können. Ich habe schon seit einiger Zeit versucht, meinen Kopf darum zu wickeln (außer das Vorschaubild zu deaktivieren). Gibt es eine Möglichkeit, meine Methode ansprechbar zu machen?

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

Answer 1

Die Verwendung von CSS zum Zuschneiden des Bildes funktionierte gut für Desktops, die breiter als das Bild selbst waren. Bei einer reaktionsschnellen Größenänderung des Bildes ist dies jedoch aufgrund der sich ständig ändernden Breite und Höhe des Bilds je nach Gerät fast unmöglich.

Stattdessen; Ich habe mich an JavaScript gewandt, das das Bild tatsächlich auf die Breite und Höhe und den gewünschten Ort zuschneidet. Dies wird von Jcrop festgelegt, das dann problemlos die img-responsiveGröße des Bilds auf das mobile Gerät ändern kann.

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

Ursprüngliche Antwort mit diesem Ausschnitt: https://stackoverflow.com/a/36436245/956106