Recadrage de l'Image Téléchargée à l'aide de Jcrop

Je suis en train d'essayer de recadrer une image téléchargée à l'aide de Jcrop. Mon intention est de recadrer l'image lorsque l'utilisateur de télécharger. Je n'ai pas besoin de stocker l'utilisateur de télécharger l'image sur le serveur. Mais, je dois stocker uniquement la partie de l'image de l'utilisateur sélectionne via Jcrop pour le serveur. Voici la violon lien pour le problème

J'ai utilisé le code suivant:

HTML:

<form id="form1">
    <input type='file' id="imgInp" />
    <img id="blah" class="crop" src="#" alt="your image" />
    <input type="hidden" id="x" name="x" />
        <input type="hidden" id="y" name="y" />
        <input type="hidden" id="w" name="w" />
        <input type="hidden" id="h" name="h" />
</form>

CSS:

<style>
#blah {
    background-color: #FFF;
    width: 500px;
    height: 330px;
    font-size: 24px;
    display: block;
  }
</style>

Js:

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp").change(function(){
        console.log(this);
        readURL(this);
         $(function(){

    $('.crop').Jcrop({

      onSelect: updateCoords,

            bgOpacity:   .4,
            setSelect:   [ 100, 100, 50, 50 ],
            aspectRatio: 16 / 9
    });

  });
    });

  function updateCoords(c)
  {
    console.log(c);
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
  };

J'ai essayé comme, après téléchargement de l'image, la même image est utilisée pour JCrop, de sorte que je peux obtenir les coordonnées des valeurs pour générer le reste de l'image. Mon problème maintenant est ceci: Lors du téléchargement, j'obtiens la couleur noire dans l'image spot plutôt que l'image téléchargée. Quelqu'un peut-il regarder et de trouver ce qui n'allait pas avec le code?

Je pense que vous pouvez utiliser une toile et d'obtenir les données d'image de la toile, w3schools.com/tags/canvas_getimagedata.asp, je ne sais pas si jcrop utilise une toile, peut-être vous avez besoin de quelque chose de différent que jcrop si elle ne l'utilise pas.

OriginalL'auteur Ganesh Babu | 2014-04-09

  1. 7

    Le problème avec l'image montrant que le noir se produit parce que vous appelez jCrop sur l'image, avant de charges. Vous pouvez mettre l'appel à jCrop après que le lecteur.onload de l'appeler ainsi, il sera exécuté une fois l'image chargée. Voir ceci :

    reader.onload = function (e) {
     $('#blah').attr('src', e.target.result);
     $('.crop').Jcrop({       
         onSelect: updateCoords,
         bgOpacity:   .4,
         setSelect:   [ 100, 100, 50, 50 ],
         aspectRatio: 16 / 9
      });
}

    Ici est une mise à jour de violon

    OriginalL'auteur David Stetler

  2. 1

    Je semble que le Jcrop a pas été mis à jour depuis longtemps et il ne prend pas en charge IE 11. L'inconvénient est qu'il ne fait pas de recadrage des images de lui-même. Uniquement vous donne les coordonnées, puis de les télécharger avec les images d'origine sur le serveur web, puis de recadrer sur le serveur.

    Prendre un coup d'oeil à la réponse ici. Il vous donne une option pour utiliser le Jcrop & Télécharger le plugin pour recadrer, de redimensionner, de l'échelle dans le navigateur et télécharger les images recadrées pour le serveur. Ce plugin utilise le HTML 5 Canvas pour recadrer les images et il prend en charge IE 11.

    OriginalL'auteur