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
Je crée une image côté navigateur avec canvas
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é
de transformer le canvas en blob et de l'envoyer via un formdata
de transformer le canvas en blob et de l'envoyer comme un objet simple
de transformer le canvas en DataURL et de l'envoyer via un formdata
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...
Alors là, on est clairement dans le code du dimanche, et vous allez voir pourquoi...
J'avais envie de faire un outil de visualisation de données facile d'accès et simple, comme un microservice que je pourrais utiliser par la suite dans une de mes applis...
Comme toujours, avant même de voir si ça existerait pas déjà, je me demande comment faire le truc moi-même et ce que je vais pouvoir apprendre avec...
C'est alors que je me dis que le SVG ce serait bien:
redimensionnable
léger
universel
je ne connais pas la génération de SVG en PHP : youpi
Je me lance...
et j'arrive à des résultats pas trop dégueus mais tout se corse (chef-lieu Ajaccio) quand je dois placer le texte (nombres, noms de colonnes etc)
C'est emmerdant à center, c'est emmerdant à redimensionner: bref c'est emmerdant. Pour résumer.
J'en ai tellement chié pour un résultat tellement pas terrible que, d'un coup, je me suis rappelé que mon copain JerryWham avait fait une lib juste pour ça !
phpGraph
Une lib qui permet de transformer des données en graphique au format SVG directement, avec des options de configuration et des rendus différents (ligne, barres, camemberts etc), ça vous tente ? Ben c'est par là :
Ce n'est pas pour visualiser des données épiques, multidimensionnelles ou vraiment très nombreuses (les clés se chevauchent s'il y a trop de données et on peut les masquer en ajoutant hidekeys en paramètre.)
Ce sera sans doute appelé à évoluer mais bon, je me suis bien amusé et j'ai touché du doigt que faire du SVG, ça se fait pas entre deux portes au doigt mouillé...
Ainsi, il suffit d'utiliser la fonction «afficher l'image» de votre navigateur puis de cliquer sur le bookmarklet pour entrer le texte du meme et récupérer l'image générée.
The mental model for Git is needlessly complex
Git provides a poor user experience
Ha ! Je ne suis pas tout seul...
Pour moi, GIT c'est de la magie: peu intuitif, impossible à mémoriser, tu comprends pas quand ça merde, tu comprends pas pourquoi ça marche...
Sous ce titre, qui siérait au conte d'un Lafontaine geek, se cache un des plus grands mystères de l'univers observable qui, pourtant, ne semble concerner que môa...
Quand je cherche à drag et drop un fichier sur un élément HTML pour en gérer l'upload via JS, je fais tout bien comme on m'a expliqué dans les tutos, les stackoverflow pis toussa:
// Une page de test qui est censée permettre de capter l'événement Drop sur un body id="body"
// version simplifiée et sans lib de mon problème
document.getElementById("body").addEventListener("drop",function(e){
console.log(e);
e.preventDefault();
e.stopPropagation();
})
Hélas, quand je drope un fichier sur ma page, Firefox charge le fichier et l'affiche (ou en lance le téléchargement)
En plus, comme le chargement casse tout, impossible de vérifier dans la console que l'événement se déclenche bien dans js (même en conservant les journaux)...
Ça ne vient pas d'une extension, j'ai testé en mode sans échec.
Ça ne vient pas de ce firefox, j'ai essayé avec Waterfox, c'est pareil...
Ça ne vient pas de cet ordi (je ne m'étonnerais plus de rien) j'ai testé sur un autre...
Je me rappelle que j'ai déjà rencontré le souci à chaque fois que j'ai voulu faire ça mais impossible de me souvenir comment j'ai fait pour y parvenir... pire, j'ai regardé mes scripts précédents qui semblent fonctionner et il n'y a rien de particulier dedans...
EDIT:
MErci à ArthurHoaro qui me fournit une solution qui consiste à faire un preventDefault sur l'event Dragover plutôt que sur le drop. C'est pas logique, mais ça marche !
// Une version qui va bien et qui explique pourquoi les autres codes fonctionnent: ils gèrent tous le dragover !
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();
})
