15 votes

Code à partir de zéro un outil de recadrage ET de redimensionnement d'image (en même temps) en jQuery/javascript?

Nous codons actuellement un JavaScript (jQuery) assez simple pour recadrer et redimensionner des images. Fondamentalement, pour l'instant, seules les fonctionnalités nécessaires sont en effet le recadrage et la redimensionnement.

J'ai vérifié quelques plugins jQuery comme JCrop, etc. et il semble qu'il n'y ait pas de plugins faisant les deux choses en même temps. Beaucoup de recadreurs OU de redimensionneurs, mais pas les deux fonctionnalités sur une même vue d'image "naturelle" en même temps. Par naturelle, je veux dire que des exemples comme celui-ci (en bas à droite) ne sont pas très agréables visuellement pour les utilisateurs :

http://jsfiddle.net/opherv/74Jep/33/

Bien que je suppose que ce serait une manière possible d'avoir les deux fonctionnalités en même temps. Cependant, vous pouvez voir que cet exemple ne fait actuellement que zoomer et est qualifié d'utiliser des "astuces laides" par l'auteur lui-même pour le faire :

function changeZoom(percent){
    var minWidth=viewport.width();
    var newWidth= (orgWidth-minWidth)*percent/100+minWidth;
    var newHeight= newWidth/orgRatio;
    var oldSize=[img.width(),img.height()];

    img.css({ width: newWidth+"px", height: newHeight+"px" });

    adjustDimensions();

    //astuce laide :(
    if (img.offset().left+img.width()>dragcontainer.offset().left+dragcontainer.width()){
        img.css({ left: dragcontainer.width()-img.width() +"px" });  
    }
    if (img.offset().top+img.height()>dragcontainer.offset().top+dragcontainer.height()){
        img.css({ top: dragcontainer.height()-img.height() +"px" });  
    } 
}

Nous recherchons plutôt la possibilité d'utiliser une zone/cadre de recadrage (comme nous le voyons le plus souvent sur le web) + une option de zoom/dé-zoom sur l'image (poignées sur le bord de l'image par exemple)

Puisque nous n'avons besoin que de ces deux fonctionnalités, nous avons pensé que nous pourrions coder cela à partir de zéro ou presque car nous ne voulons pas ajouter d'autres fichiers/plugins JavaScript qui seront de toute façon superflus étant donné qu'ils seront regroupés avec d'autres fonctionnalités que nous n'aurons pas besoin (du moins pour l'instant).

La question est : y a-t-il une difficulté spécifique à essayer de coder l'affichage d'une image redimensionnable par des poignées simples et recadrable par une sélection de cadre/zone (qui serait également redimensionnable en elle-même et déplaçable pour que l'utilisateur puisse affiner la partie de l'image qu'il souhaite) ?

Sommes-nous définitivement mieux séparés les deux fonctionnalités ?

Merci beaucoup pour votre aide.

1voto

Rakesh Menon Points 134

Avez-vous essayé ce plugin ??

http://code.google.com/p/resize-crop/

Il fait à la fois du recadrage et du redimensionnement

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X