Javascript Girl
  1. Javascript Girl
  3. JCrop redimensionner l'image sans recadrer – Javascript
Intereting Posts
Arrêter un champ de saisie sous une forme d'envoi Comment supprimer le caractère unicode dans tinymce formatter.toggle () Vérifiez si la chaîne est un préfixe d'un Javascript RegExp Rendement de page avec asp.net ajax Supprimer le délai de décompte dans JavaScript? Validation en direct ajout / mise à jour de données dans un tableau php, ajax, javascript Javascript Rich Text Editors Javascript: prenez tous les n ° Element of Array Est-il possible de les ajouter en grand total en utilisant ce code? Directive Angular2: comment détecter les modifications DOM JavaScript Number preserve leading 0 _.merge clone les sous-documents au lieu de la mise à jour Protractor: Find Element by Attribute $ (Document) .ready et iframe content Mémoires de la fonction fondée sur les promesses

JCrop redimensionner l'image sans recadrer – Javascript

J'essaie d'utiliser JCrop pour recadrer une image. Cependant, les résultats sont frustrement faibles et je ne sais pas pourquoi. J'ai un uploader d'image qui, lorsque quelqu'un sélectionne dans l'image, un javascript change la source d'une image déjà sur la page pour correspondre à la nouvelle image de téléchargement. J'ai alors ce code: 

$('#myForm').ajaxForm({ dataType: 'json', success: function (result) { $("#image-editor-preview img") .attr("src", "/Profiles/AvatarWorker/" + _id + "?random=" + Math.random()) .Jcrop({ aspectRatio: 1, setSelect: [100, 100, 50, 50], minSize: [160, 160], maxSize: [160, 160], onChange: setCoords, onSelect: setCoords }); } }); var x = 0, y = 0, w = 0, h = 0; function setCoords(c) { x = cx; y = cy; w = cw; h = ch; };

Cependant, c'est ce qui se passe:

Entrez la description de l'image ici

J'ai essayé essayé un peu pour corriger cela, mais les résultats finaux sont TOUJOURS les mêmes. Quelqu'un a-t-il des idées? Merci.

J'ai eu le même problème, mais j'ai trouvé, pourquoi il se passait ainsi.

Dans mon fichier css, j'ai ce code: 

 img { width: 100%; height: auto; border: none; }

Lorsque j'ai supprimé la largeur et la hauteur de cette définition, le plugin a commencé à fonctionner correctement.

J'ai pu le comprendre. Il s'avère que JCrop dans un mode de démarrage de Twitter a un problème avec la largeur de la boîte JCrop. Le mode bootstrap de Twitter remplace le CSS dans le cs JCrop. A dû modifier le CSS dans JCrop pour que cela ne se produise pas.

Selon les documents Jcrop, il ne fait pas réellement la culture. Il crée uniquement une IU de recadrage d'image. Cela dépend ensuite du fait que le serveur effectue la récolte actuelle; Voir http://deepliquid.com/content/Jcrop_Implementation_Theory.html . Il semble donc que le plugin fait exactement ce qu'il est conçu pour faire. Il vous laisse maintenant le reste pour vous faire vous-même sur le serveur, comme ils le montrent.