Afficher une partie d'une image en utilisant css mais en la réactif avec img-responsive

Dec 06 2020

J'ai créé un système dans lequel un utilisateur télécharge une image, elle est redimensionnée à une certaine largeur, puis l'utilisateur peut recadrer l'image (utilisait imgAreaSelect mais mis à niveau vers Jcrop pour ajouter une utilisation mobile).

J'ai tout cela fonctionne bien. Une fois que l'utilisateur déplace le sélecteur de Jcrop là où il le souhaite et choisit le bouton Enregistrer, jQuery écrit du CSS sophistiqué pour afficher la partie de l'image que l'utilisateur souhaite (le reste est masqué via overflow: hidden) plus un formulaire pour ajouter du crédit photo et autres informations sur la photo.

Ceci encore, fonctionne très bien ... sur un bureau. L'image est en taille réelle sur un appareil mobile et ne répond pas, vous ne pouvez donc pas voir la majorité de la photo. J'essaie de comprendre cela depuis un moment maintenant (autre que la désactivation de la photo d'aperçu). Existe-t-il un moyen de réactiver ma méthode?

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

Réponses

DawsonIrvine Dec 06 2020 at 22:43

L'utilisation de CSS pour rogner l'image fonctionnait bien pour les ordinateurs de bureau plus larges que l'image elle-même, mais lors du redimensionnement réactif de l'image, il est presque impossible en raison des largeurs et hauteurs toujours changeantes de l'image en fonction de l'appareil.

Au lieu; Je me suis tourné vers JavaScript qui rogne réellement l'image à la largeur et à la hauteur et à l'emplacement souhaité, définis par le Jcrop qui n'a alors aucun problème img-responsiveà redimensionner l'image sur l'appareil mobile.

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

Réponse d'origine contenant cet extrait: https://stackoverflow.com/a/36436245/956106