passer un dataURL par AJAX

Question

Je tente d'enregistrer un dataURL fait à partir d'un canevas HTML5 à mon mysql db.

J'ai installé ajax pour tirer le var que je l'ai fait appelé « dataURL » et je suis mise dataURL à img la toile en utilisant ce code:

dataURL = oCanvas.toDataURL(); 

mon problème est dataURL de la toile a beaucoup de les caractères qui ne fonctionnent pas bien en tirant pour ajax donc j'ai besoin d'un moyen de l'encoder ou de le manipuler différemment afin que mon résultat final puisse être sauvegardé dans un db mysql puis plus tard "décodé" pour s'afficher à nouveau.

Je sais que mon AJAX fonctionne parce que si je mets le var dataURL à quelque chose comme "cheese" il enregistre dans la base de données comme fromage.

Toute aide serait grandement appréciée!

Answer 1

J'ai fini par mettre un Événement, lorsque l'image a été créée, elle définit le paramètre dataURL sur un élément de formulaire caché. Plus besoin de le passer par ajax :). Merci pour la suggestion cependant.

Answer 2

Les données que vous recevez de toDataUrl sera dans un format comme celui-ci:

data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD.... (very long string) 

filtrer Tout d'abord les données reçues à la seule partie après data:image/png;base64,

Ensuite, utilisez la bibliothèque qui base64 votre langue fournit à décoder à un tableau d'octets (ou blob). Si vous utilisez Java: Apache Commons Codec

Voici un exemple groovy:

def bytes = new Base64().decode(filteredData) as byte[] 

Vous pouvez enregistrer le résultat décodé à votre base de données (à récupérer ultérieurement)

Answer 3

Le codage Base64 prend presque 4x autant d'octets pour encoder une image. Il est suggéré d'utiliser window.atob pour décoder le base64 avant la transmission si vous utilisez des formes ajax ou régulières. Bien sûr IE ne le supporte pas mais this looks like a shim.