la conversion de toile à goutte à l'aide de cropper js
J'ai créé une application à l'aide de cropper.js pour le cadrage d'une image. L'application fonctionne, et l'image est de culture, après que j'essaie d'envoyer l'image recadrée comme blob pour le côté serveur pour le stockage,
Que par la cropper.js de la documentation, nous pouvons utiliser toile.toDataURL pour obtenir des Données d'URL, ou l'utilisation toile.toBlob pour obtenir une tache et de le transférer à un serveur FormData. quand j'ai essayé toile.toDataURL() je suis le base64 de la chaîne, mais en fait j'ai besoin d'envoyer le fichier en tant que blob j'ai donc essayé avec toile.toBlob() mais je suis Uncaught TypeError: canvas.toBlob is not a function
en chrome et TypeError: Not enough arguments to HTMLCanvasElement.toBlob.
dans Firefox
Quelqu'un peut-il me dire une solution à ce
Mon code est comme ça
var canvas = $image.cropper("getCroppedCanvas", undefined);
var formData = new FormData();
formData.append('mainImage', $("#inputImage")[0].files[0]);
formData.append('croppedImage', canvas.toBlob());
OriginalL'auteur Alex Man | 2015-04-23
Vous devez vous connecter pour publier un commentaire.
La méthode toBlob est asynchrone et ont besoin de deux arguments, la fonction de rappel et du type d'image (il est le troisième paramètre optionnel pour la qualité):
Exemple
Ne prend en charge tous les navigateurs (IE a besoin de préfixe, msToBlob, et il fonctionne différemment de la norme) et Chrome a besoin d'un polyfill.
Mise à jour (pour des OP de modifier, maintenant supprimé) La raison principale pourquoi l'image recadrée est plus grand est parce que l'original est JPEG, la nouvelle est PNG. Vous pouvez modifier cette valeur en utilisant toDataURL:
avant de le transmettre au manuel des données uri à Goutte. Je vous conseille d'utiliser le polyfill comme si le navigateur prend en charge toBlob (), il sera beaucoup plus rapide et utilise moins de mémoire de frais généraux que de passer par le codage des données-uri.
il suffit d'inclure le polyfill je lien pour google Chrome. Dans IE vous devriez être en mesure d'utiliser de la toile.msToBlob(...). Il suffit de noter que msToBlob fonctionne un peu différent de la norme, alors à l'aide de la polyfill ici aussi, est recommandé
ajout de l'exemple de MS version (non testé)
il suffit de noter que vous ne pouvez pas ajouter une Goutte pour les DOM/forme. Il doit être représenté comme une chaîne de caractères (c'est à dire. data-uri). Vous pouvez stocker le blob comme une variable globale et le passer dans la méthode que vous utilisez pour envoyer les données au serveur.
que serait une autre question. Je suggère d'ouvrir une nouvelle question pour que la question d'origine était ici, si je comprends bien, comment utiliser le toBlob() la méthode.
OriginalL'auteur