JCrop la Façon de découper l'image en la faisant glisser derrière un div (comme facebook cover)

J'ai utilisé Jcrop approfondie, mais je tiens à recadrer l'image dans beaucoup de façon similaire à l'Facebook utilise pour recadrer son image de couverture.

Donc, je veux un div de taille fixe dans lequel l'arrière-plan pour tenir une déplaçable à l'image de sa taille d'origine, l'utilisateur de faire glisser et de la région visible pour être recadrée.

De ce que j'ai appris, dans JCrop, l'image originale est de taille fixe et déplaçable région se trouve au-dessus de laquelle vous souhaitez être recadrée.Je veux juste le contraire. L'image à être déplaçable et de sélection de la région à être fixé.

Est-il un moyen de le faire en utilisant JCrop?

EDIT:
Depuis cela fait déjà quelques temps que j'ai posté la réponse, l'autre réponse aide à beaucoup mieux. Veuillez vérifier que les

J'aimerais avoir une solution comme celle - @ashutosh avez-vous réussi à le résoudre?
vous avez toute la solution, merci de les ajouter ici si vous avez obtenu une
vous avez toute la solution, merci de les ajouter ici si vous avez obtenu une
ok, puisque je ne peux pas obtenir la ou les bonnes réponses, je vais maintenant répondre à comment j'ai résolu mon problème

OriginalL'auteur ashutosh | 2013-10-02

  1. 10

    Pour recadrer les images comme dans Facebook (en faisant glisser à l'intérieur d'une zone), j'aurais fortement recommander d'utiliser Guillotine (démo).

    C'est un très léger plugin et vous permet de recadrer, zoomer et faire pivoter les images. Il dispose également d'un écran tactile et il est sensible (liquide). Il est parfait pour Facebook comme le recadrage et il est vraiment facile à installer.

    OriginalL'auteur 404

  2. 6

    J'ai cherché pendant un moment, Alors que j'ai reçu un autre plugin grande- JWindowCrop

    Vous pouvez également obtenir plugin à partir de la référentiel.

    Il est benefitial pour le fait que le plugin est très simple et vous pouvez facilement le modifier en fonction de vos besoins.

    Voici comment j'ai fait pour qu'il corresponde à la zone de recadrage de facebook cover:

    HTML:

    <img id="target" class="crop" alt="" src="images/sample-cover.jpg" />

    JavaScript:

    $('.crop').jWindowCrop({
                targetWidth: 851, //Width of facebook cover division
                targetHeight: 315, //Height of cover division
                loadingText: 'Your Cover is uploading....',
                onChange: function(result) {
                    console.log("separation from left- "+result.cropX);
                    console.log("separation from top- "+result.cropY);
                    console.log("width- "+result.cropW);
                    console.log("Height- "+result.cropH);
                }
            });

    Vous pouvez modifier l'intérieur de la région si vous n'êtes pas satisfait avec le plugin.

    NOTE: Depuis le facebook de couverture est de largeur 851px seulement, l'image téléchargée et le métayer de la division doivent être de même largeur.e 851px.

    J'ai préparé un DÉMO ici

    EDIT:
    Juste au cas où si vous avez remarqué, le texte "faites-le Glisser pour repositionner" dans la zone de recadrage(en haut à gauche) pendant que vous faites glisser l'image à l'intérieur de la couverture, vous pouvez mentionner votre propre texte en changeant cette ligne de plugin:

     Line:34-   base.$frame.append('<div class="jwc_controls" style="position:relative;display:'+(base.options.showControlsOnStart ? 'block' : 'none')+';"><span class="dragger">Drag to reposition</span></div>');

    Je ne pourrais pas eu le temps d'ajouter une option dans le plugin pour le faire.

    Ce plugin est génial! Avez-vous trouvé un moyen de l'utiliser avec un formulaire? J'ai besoin de recadrer une image avant de la télécharger et je veux aussi conserver la version originale. Je suis en train de modifier le fichier bootstrap-uploader pour afficher deux fenêtres de prévisualisation, l'un d'eux avec jwindowscrop.
    pouvez-vous me montrer un violon ou un exemple de comment utilisez-vous? Peut-être que je peux vous suggérer quelques modifications. À partir de ce que vous avez dit, je vous suggère d'utiliser jquery on méthode pour déclencher l'jwindowcrop fonction pour activer le recadrage dans la zone d'aperçu.
    PAGE vous pouvez voir ma page de démonstration. Je ne sais pas comment appeler mon jWindowCrop fonction sur "télécharger". Si je me lance à l'aide de la console ça marche!!!
    Merci pour la suggestion.. Super plugin.

    OriginalL'auteur ashutosh

  3. 1

    télécharger l'image comme facebook l'image de couverture l'utilisation de ce plugin facebook-style-couverture-image-repositionner

    OriginalL'auteur Satya Prakash