jQuery Girl
  1. jQuery Girl
  3. Recadrer l’image dessinée dans la canvas avec JCrop
Intereting Posts
jQuery Validate – “Ignorez ces champs ou remplissez au moins X d’entre eux” Comment obtenir un élément avec une étiquette cochée dans la balise ? Propriétés / parameters supplémentaires pour JavaScript: window.print () pour activer les arrière-plans par défaut TypeError: $ (…) .tooltip n’est pas une fonction JQuery peut-il générer une erreur de la part de mes gestionnaires d’événements? Changer le thème du bouton quand on appuie dessus jQuery .val () ne fonctionne pas lors de la définition d’une variable coulisses de largeur fixe avec carrousel lisse Jssor Slider: Comment cibler une diapositive spécifique avec un lien texte / image? Cible un vide Poster / soumettre plusieurs formulaires dans jQuery Problèmes liés au plug-in Galleriffic avec IE7 jQuery: recherche d’un nom de classe partiel jQuery: Existe-t-il un moyen d’append automatiquement des atsortingbuts au code HTML généré dynamicment, de la même manière que live () fonctionne avec des événements? Bootstrap & Form Validation

Recadrer l’image dessinée dans la canvas avec JCrop

Je découvre HTML5 et j’essaie de rogner une image avec JCrop. Il n’y a pas de problème si je veux le recadrer directement, mais quand il est dessiné dans une canvas, JCrop ne fonctionne pas.

Je pense que la raison pour laquelle je crée peut-être une variable d’image pour pouvoir la dessiner dans le canevas de la fenêtre et la définir de manière dynamic est Id. Donc, Jquery ne peut pas accéder à cette image créée dynamicment. Mais même ainsi je ne sais pas quoi faire.

Voici mon code HTML complet. 

    acanimal - Crop image on the client side with JCrop and HTML5 canvas element     $(window).load(function () { var canvas = document.getElementById('viewport'), context = canvas.getContext('2d'); make_base(); function make_base() { var base_image = new Image(); base_image.id = 'target'; base_image.src = 'demo_files/sago.jpg'; base_image.onload = function () { context.drawImage(base_image, 0, 0); } } }); jQuery(function ($) { $('#target').Jcrop({ onChange: updatePreview, onSelect: updatePreview, allowSelect: true, allowMove: true, allowResize: true, aspectRatio: 0 }); function updatePreview(c) { if (parseInt(cw) > 0) { // Show image preview var imageObj = $("#target")[0]; var canvas = $("#preview")[0]; var context = canvas.getContext("2d"); if (imageObj != null && cx != 0 && cy != 0 && cw != 0 && ch != 0) { context.drawImage(imageObj, cx, cy, cw, ch, 0, 0, canvas.width, canvas.height); } } }; });

Qu’est-ce que je fais mal?

Merci…

http://jsfiddle.net/wr2er0Lj/

Vous êtes réglé Jcrop pas correct, essayez-le.