Enregistrer une image d'un canvas

Bonjour à tous,

Voilà je suis bloqué sur un problème depuis plusieurs jours, et malgré tout ce qu'il y a sur Google, je n'arrive pas à le régler.
Mon problème est le suivant : J'ai un canvas, dans lequel je coupe des images en deux, pour les recoller et en faire de nouvelles (c'est un jeux pour enfant), et j'aimerais pouvoir sauvegarder la nouvelle image (donc composée de deux moitié d'images différentes).

Voilà mon code qui dessine mes images :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

var ctx; draw = function() { ctx = document.getElementById("canvas").getContext('2d'); img.onload = function() { if( ciseaux == "V" ) { ctx.drawImage(img, 0, 0, 200, 400, 0, 0, 200, 400); ctx.drawImage(img2, 200, 0, 200, 400, 200 + espace, 0, 200, 400); } else { ctx.drawImage(img, 0, 0, 400, 200, 0, 0, 400, 200); ctx.drawImage(img2, 0, 200, 400, 200, 0, 200 + espace, 400, 200); } }; img2.onload = function() { if( ciseaux == "V" ) { ctx.drawImage(img, 0, 0, 200, 400, 0, 0, 200, 400); ctx.drawImage(img2, 200, 0, 200, 400, 200 + espace, 0, 200, 400); } else { ctx.drawImage(img, 0, 0, 400, 200, 0, 0, 400, 200); ctx.drawImage(img2, 0, 200, 400, 200, 0, 200 + espace, 400, 200); } }; };

---

Et quand j'appelle ce morceau de code :

Code:

---

1 2 3

var canvas = document.getElementById("canvas"); var dataUrl = canvas.toDataURL("image/jpeg"); console.log(dataUrl);

---

Il me retourne une erreur de sécurité, qui est celle-ci :

Citation:

---

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': tainted canvases may not be exported.

---

Vous remerciant d'avance.
Cordialement.

si les testes sont fait en local sa peut etre la cause il faudrait tester avec firefox qui n'a pas cette restriction

Tout est fait en local, le client du projet veux ce jeux en mode déconnecté, sans aucuns accès internet. Du coup nous avons tout développé en WebSQL, via Javascript. Seulement Chrome et Safari supporte WebSQL, pas firefox donc on l'a abandonné.

Je pense que c'est là que réside le problème, mais est-ce qu'il y aurait de récupérer l'image du canvas malgré ceci ?

installer un serveur en local ?

L'application devra être utilisable sous ordinateur, tablette Android et IOS.
Ca reste envisageable ?

De plus elle doit être utilisable simplement, donc on aimerait que le client n'ait pas à installer WAMP ou un autre, puis copier les fichiers dedans, pour pouvoir le lancer.

non il faudra du coup faire appel à un service web hebergé sur un serveur qui retournera le fichier en forcedownload ...

Là je vois un obstacle de conception. Le client veut un canvas qui manipule des images en local ; or, le modèle de sécurité des canvas interdit de manipuler des images en local – sauf sous Firefox.

Maestro, tu peux peut-être trouver une solution « bidouille » qui risque de ne pas tenir sur la durée ; tu peux aussi exposer la situation à ton client et trouver un compromis avec lui. Tu pourras entre autres lui parler de la solution du service web proposée par Spaffy.

Par ailleurs, le serveur local n'est pas tout à fait à jeter aux orties. Évidemment, une suite *AMP complète serait trop lourde, mais pourquoi pas un serveur léger, qui se contenterait de fournir un « domaine » pour satisfaire les exigences de sécurité du canvas, et qui serait implémenté en Python, Ruby, Node ou encore Java. Il n'est pas rare de voir des logiciels empaqueter une copie complète de la machine virtuelle Java, et c'est loin d'être la plus légère…

Ouais... enfin si on veut des applis qui fonctionnent "sans aucun accès internet", les technologies Web ne sont peut-être pas les plus appropriées ni les premières qui viennent à l'esprit pour l'implémentation... :?

Le problème fondamental est plutôt que nous sommes dans un cas où les fichiers locaux sont une origine sûre, mais qu'un navigateur normal ne peut pas le deviner.
Il faudrait donc utiliser des navigateurs modifiés, par extension, configuration, modding ou quoi que ce soit qui marche, pour accepter les fichiers locaux comme source sûre (et, par sécurité, refuser d'accéder au réseau.)

Et vu que ça a l'air compliqué à faire, effectivement, le choix de se baser sur des navigateurs normaux pour avoir le comportement d'un navigateur customisé, n'était pas terrible.

sinon il y a toujour firefox et IndexedDB :king:

IndexedDB n'est ni utilisable sur les navigateurs IOS, ni sur les Android ; or le client souhaite l'application principalement sur tablettes

alors la technologie web n'est pas adaptée comme le soulève Bovino.