Informatique

Bonsoir

Comme dit dans le titre, j'ai un soucis avec getImageData()
J'ai juste fait ça pour l'instant, ça copie colle une <img> dans un canevas, puis je veux récupérer les données du canevas dans une var avec getImageData(), le soucis ligne 22

Si je met l'alert avant elle s'affiche si je la met après elle ne s'affiche pas

Une idée pourquoi ?

Et aussi pourquoi il faut obligatoirement mettre drawImage() dans l'evnmt window.onload ?

Je ne suis pas un expert en web et javascript. Mais de ce que j'en comprends, plein de choses sont asynchrone dans le modele d'execution de code sur le web. En particulier quand la page se charge, les elements qui sont contenu dans la page, comme par exemple les images, sont charge de facon asynchrone.

Donc si tu essaye de faire le drawImage, j'imagine que le contenu du tag img n'est pas encore charge, donc tu copies certainement une image qui n'est pas encore charge, donc probablement une image de 0px par 0px.
La fonction window.onload est execute une fois que la page entiere est charge, image incluse. Donc quand la fonction onload execute, l'image sous jacente est charge et donc le drawimage copie ce que tu attends.

Pour le alert avant, apres, j'ai pas compris la question.

Encore une fois, je fais tres peu de web. Donc ce que ej dis est a prendre avec un grain de sel.

Désolé j'ai supprimé mon message parce que j'ai testé ton code entre temps (n'hésite pas à coller ton code ici dans des balises <code></code> ou sur pastebin la prochaine fois pour que ce soit plus simple pour nous de tester). Si tu regarde ta console en ouvrant ta page tu verra peut être ça :

Uncaught DOMException: The operation is insecure. foo.html:15
    onload file:///home/matt/foo.html:15
    (Async: EventHandlerNonNull)
    <anonymous> file:///home/matt/foo.html:12

Si c'est le cas, ça vient sûrement du fait que tu ouvre ta page avec un lien file:///home/pseudo/dir/mapage.html. Le protocole file:// est considéré comme peu sécurisé par les navigateurs.

Chez moi, en lançant un petit serveur web sur le port 8000 dans le dossier où se trouve ce fichier, puis en me connectant à localhost:8000/<fichier.html> ça fonctionne très bien.

PS: je viens de capté que tu est sous windows, les chemins ont sûrement l'air un peu différent mais je pense que ce que je dis reste valable

Je ne suis pas expert non plus mais :

Il me semble que l'alert bloque la page tant que tu ne l'enlèves pas, donc si tu la mets après, comme l'a dit godrik je pense que 'limage ne doit pas être totalement chargée.

Pour le onload il semblerai que ce soit des vestiges de l'ancien Internet Explorer par rapport au chargement de pages, ça s'active quand tout le reste de la page a été chargé, donc pour ta question je ne sais pas, mais c'est peut être pour que le canvas se charge complètement afin de charger correctement ton image.

Enfin je dis ça, mais il ne me semble pas que ce soit obligatoire en fait.

Et sinon, en regardant à droite à gauche, mettre une fonction sur window.onload n'est pas une très bonne pratique. Comme dit mon VDD c'est un vestige d'un ancien temps (IE < 11 ). Une meilleur pratique serai de mettre un eventListener sur le "load" de img :

img.addEventListener('load', function() { /* code ici */ })

Mais bon, prends ce que je te dis avec des pincettes, je suis le 3e non expert qui te répond , j'ai juste trouvé ça en cherchant vite fait.

L'alert c'était juste pour voir à quel moment mon code crashait justement, si l'alert ne s'affiche pas c'est qu'une ligne au dessus a un problème

Le 04 mai 2021 à 19:04:28 _S0uL a écrit :
Désolé j'ai supprimé mon message parce que j'ai testé ton code entre temps (n'hésite pas à coller ton code ici dans des balises <code></code> ou sur pastebin la prochaine fois pour que ce soit plus simple pour nous de tester). Si tu regarde ta console en ouvrant ta page tu verra peut être ça :

Uncaught DOMException: The operation is insecure. foo.html:15
    onload file:///home/matt/foo.html:15
    (Async: EventHandlerNonNull)
    <anonymous> file:///home/matt/foo.html:12

Si c'est le cas, ça vient sûrement du fait que tu ouvre ta page avec un lien file:///home/pseudo/dir/mapage.html. Le protocole file:// est considéré comme peu sécurisé par les navigateurs.

Chez moi, en lançant un petit serveur web sur le port 8000 dans le dossier où se trouve ce fichier, puis en me connectant à localhost:8000/<fichier.html> ça fonctionne très bien.

PS: je viens de capté que tu est sous windows, les chemins ont sûrement l'air un peu différent mais je pense que ce que je dis reste valable

En effet moi j'ai
Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.,
Donc ouais c'est juste une problème de sécurité, bien chiant tout ça, je commençais tout juste à apprécier la simplicité du js

Merci en tout cas, j'ai pas le reflexe d'aller voir dans la console j'aurais pu voir l'erreur tout seul

Concernant le window.onload, c'était juste par curiosité, merci pour vos réponses

je commençais tout juste à apprécier la simplicité du js

Là en l'occurence c'est pas un soucis de JS mais le navigateur qui ne fait pas confiance au protocole utilisé (et il a bien raison). Par contre js n'est pas un langage simple, vraiment.

Le 04 mai 2021 à 19:47:03 _S0uL a écrit :

je commençais tout juste à apprécier la simplicité du js

Là en l'occurence c'est pas un soucis de JS mais le navigateur qui ne fait pas confiance au protocole utilisé (et il a bien raison). Par contre js n'est pas un langage simple, vraiment.

Non je parlais pas du langage en lui même mais du fait que y'a juste à écrire sur notepad puis à actualiser sur le navigateur, c'est quand même plus cool que de recompiler du c à chaque modif

Bon sinon une solution temporaire que j'ai trouvé, c'est de ré-encoder l'image en base64 et de c/c son code dans l'html, c'est moche, mais ça marche

sert la page html avec un serveur local pour retirer toute ces erreurs.

Le 04 mai 2021 à 19:51:46 :

Le 04 mai 2021 à 19:47:03 _S0uL a écrit :

je commençais tout juste à apprécier la simplicité du js

Là en l'occurence c'est pas un soucis de JS mais le navigateur qui ne fait pas confiance au protocole utilisé (et il a bien raison). Par contre js n'est pas un langage simple, vraiment.

Non je parlais pas du langage en lui même mais du fait que y'a juste à écrire sur notepad puis à actualiser sur le navigateur, c'est quand même plus cool que de recompiler du c à chaque modif

Bon sinon une solution temporaire que j'ai trouvé, c'est de ré-encoder l'image en base64 et de c/c son code dans l'html, c'est moche, mais ça marche

Tu peux aussi faire ton code directement sur le navigateur pour tester certains trucs, même pas besoin de ré-actualiser.
Si tu veux des infos sur ton code un console.log suffirait, et tu peux ouvrir le mode développeur (ctrl màj k sur firefox) pour te balader dans les variables.
Par exemple faire windows (ou console.log(windows), canvas ou ctx par exemple et tu devrais avoir leurs infos en déroulant le menu.

Salut, tu as toutes les informations nécessaires sur cet article :

https://developer.mozilla.org/fr/docs/Web/HTML/CORS_enabled_image