How to save a base64 image from javascript with php | Our Code World

Bon, on ne m'enlèvera pas de la tête que c'est pas super intuitif, ni super simple, mais bon, je n'ai trouvé que ça qui fonctionne...

Mon souci

  1. Je crée une image côté navigateur avec canvas
  2. je veux l'envoyer à mon serveur pour stockage

On pourrait croire que c'est simple, hein... ben j'ai pas trouvé, personnellement.

J'ai essayé

  1. de transformer le canvas en blob et de l'envoyer via un formdata
  2. de transformer le canvas en blob et de l'envoyer comme un objet simple
  3. de transformer le canvas en DataURL et de l'envoyer via un formdata
  4. de transformer le canvas en DataURL et de l'envoyer comme un objet simple

Mais à chaque fois, j'ai pas été foutu de récupérer les données côté PHP (bon, je me doute qu'il doit y avoir un pacson de trucs que j'ignore encore, hein...)

Ensuite, j'ai pensé

«et si je passais les données au format base64, je devrais pouvoir les récupérer facilement...» car je pratique couramment un optimisme ridicule au sujet duquel il m'arrive encore de sombrer dans la stupéfaction à grand fracas...

Dont acte: je recommence à farfouiller avec des fetch, des posts pis tout mais sans succès: les données décodées font une image invalide.

en désespoir de cause

Je décide de procéder moins élégamment: je copie les données vers un formulaire caché que je poste en target blank pour pas perdre ma page de travail... Oui, je sais, c'est sale, c'est moche, c'est pas secure, j'en ai conscience, c'est pas la peine de m'enfoncer, j'ai déjà assez honte comme ça...

Je reçois bien de la base 64, je décode... Et l'image n'est toujours pas valide. Puis une recherche m'apprend qu'il faut virer l'en-tête base64 côté serveur avant de décoder pour que ça fonctionne...

Je teste et... ça marche.

SUPER INTUITIF MERCI

Astuce Javascript+html: Avoir un comportement normal sur le drop avec Firefox

Note pour la prochaine fois que je voudrai faire un drag & drop de fichiers sur Firefox

Comme découvert grâce à ArthurHoaro, pour obliger le navigateur à gérer le drop de fichier sur une dropzone, il faut d'abord faire un preventDefault() sur les événements dragover et/ou dragenter.

solution N°1

On peut le faire en dur dans le HTML:

<div ondragover="return false">
<div ondragover="event.preventDefault()">

Ce qui peut même servir pour le ciblage du drop avec un sélecteur genre *[ondragover]

Solution N°2

On peut bien entendu également le définir directement dans le js:

document.getElementById("body").addEventListener("drop",function(e){
        console.log(e);
        e.preventDefault();
        e.stopPropagation();
})
document.getElementById("body").addEventListener("dragover",function(e){
        e.preventDefault();
        e.stopPropagation();
})
document.getElementById("body").addEventListener("dragenter",function(e){
        e.preventDefault();
        e.stopPropagation();
})

Je sers la programmation et c est ma joie   (1).jpg

Sources:

Fil RSS des articles