Dessiner sur une image dans une balise canvas

J'ai un problème secondaire, j'ai dessiné un cercle qui s'affiche si j'ai pas image de chargé mais qui ne s'affiche pas si je met image. Une idée du problème ?

var a = document.getElementById('canvas_' + a[1]);
var ctx = a.getContext("2d");
var image = new Image();
image.src = 'tempo/'+ id +'/'+ nom_fichier.nom;
image.onload = function() {ctx.drawImage(this,0,0,242,182);};
ctx.beginPath();
ctx.strokeStyle = "#369";
ctx.fillStyle="#c00";
ctx.arc(140,130,30,0,Math.PI*2,false);
ctx.stroke();

Il se pourrait que l'image se dessine au dessus du cercle.

oui sait effectivement le cas mais comment faut faire pour que le cercle soit au dessus

Oui, étant donné que le dessin de l'image se produit une fois qu'elle est chargée (onload) et que ceci survient un certain délai après la suite des instructions (c'est asynchrone).
Il faudrait pour cela placer les lignes ctx.beginPath() à ctx.stroke() dans la fonction liée à l'événement onload (après drawImage)

Tu peux déplacer le code qui dessine le cercle à l'intérieur du onload de l'image, mais après la ligne qui dessine l'image sur le canvas.

Oui effectivement en déplacent sa marche maintenant. Merci sephitan

J'ai une autre question, si je veux sauvegardé cette nouvelle image je fais comment ?

ctx.toDataUrl(), ou un truc comme ca. Ca te donne l'image encodée en base 64, après faut voir ce que tu veux en faire exactement. Les navigateurs peuvent afficher les images encodées comme ca nativement, sinon il faut la décoder d'une manière ou d'une autre (php doit pouvoir faire ca aussi).

je veux stocké la photo avec ce cercle dans une dossier pour plus tard affiché dans un pdf. Donc je voudrais un format jpg ou png. Une image 64 sa donne doit avec une photo type paysage ?

Pas compris ta dernière question, mais du coup il faut que tu envoies le résultat de getDataUrl, et que tu décodes l'image côté serveur. Comme dit, cherches un moyen de décoder une image à partir d'un encodage base64 dans le langage que tu utilises coté server, ca doit se trouver.

En gros l'idée est de récupéré le cercle en image 64 et avec PHP de fusionné mon image avec image 64. Sait bien sa ?

Nope. Après que tu ai déssiné et ton image et ton cercle sur le canvas, tu récuperes le tout sous forme d'image encodé en base64 (ca fais une chaine de caractères assez longue qui ne veux rien dire), tu envois ça au PHP, et il s'occupe de transformer le tout en véritable fichier image.

Ou alors tu peux tout faire en PHP côté serveur s'il n'y a pas d'interactions avec l'utilisateur.

Tu es sur que on peut transformé une photo en image 64 ?

Pour la convertir en php sa sa marque ?

<?php
$data = "Image 64 récupéré en json";
$data = base64_decode($data);
$img = imagecreatefromstring($data);
header('Content-Type: image/png');
imagepng($img);
imagedestroy($img);
?>

Bon j'ai récupéré le code 64 de la photo avec mon cercle de cette façon:

var a = document.getElementById('canvas_' + a[1]);
var ctx = a.getContext("2d");

var image = new Image(); 
image.src = 'tempo/'+ id +'/'+ nom_fichier.nom;
image.onload = function() {
ctx.drawImage(this,0,0,242,182);
ctx.beginPath();
ctx.strokeStyle = "#FF0015";
ctx.arc(130,70,50,0,Math.PI*2,false);
ctx.arc(130,70,51,0,Math.PI*2,false);
ctx.arc(130,70,52,0,Math.PI*2,false);
ctx.stroke();
};
var data = a.toDataURL(); 

Mais une fois transformé et affiché sa donne une image noir
Modifié par stephcache (22 Aug 2013 - 16:18)

Bien j'ai finalement trouvé un truc mais ma simplifié la vie.

J'ai trouvé sa: Canvas2Image

var a = document.getElementById('canvas_' + a[1]);
var ctx = a.getContext("2d");
var image = new Image(); 
image.src = 'tempo/'+ id +'/'+ nom_fichier.nom;
image.onload = function() {
ctx.drawImage(this,0,0,242,182);
ctx.beginPath();
ctx.strokeStyle = "#FF0015";
ctx.arc(130,70,50,0,Math.PI*2,false);
ctx.arc(130,70,51,0,Math.PI*2,false);
ctx.arc(130,70,52,0,Math.PI*2,false);
ctx.stroke();
var data = Canvas2Image.saveAsPNG(a, true);
console.log(data);
xhr.open('post', 'upload_64.php', true);
xhr.setRequestHeader('content-type', 'multipart/form-data');
xhr.setRequestHeader('image64', data);
xhr.send(file);

J'ai voulue passé en xhr sa: <img src="tous le code image64" /> mais visiblement sa me retour sa[object HTMLImageElement][Origin].

Sa doit vouloir dire que je ne peux pas, donc je me suis demandé comment récupéré ce qui ce trouve dans src sachant que la balise IMG ce trouve dans un variable data et tous sa en javascript ou jquery

a écrit :
Tu es sur que on peut transformé une photo en image 64 ?

Pour la convertir en php sa sa marque ?

Aucune idée, j'ai jamais fait, mais ca m'étonnerais qu'on ne puisse pas.Fais une recherche google pour trouver une solution.

stephcache a écrit :
Tu es sur que on peut transformé une photo en image 64 ?

var a = document.getElementById('canvas_' + a[1]);
var ctx = a.getContext("2d");

var image = new Image(); 
image.src = 'tempo/'+ id +'/'+ nom_fichier.nom;
image.onload = function() {
ctx.drawImage(this,0,0,242,182);
ctx.beginPath();
ctx.strokeStyle = "#FF0015";
ctx.arc(130,70,50,0,Math.PI*2,false);
ctx.arc(130,70,51,0,Math.PI*2,false);
ctx.arc(130,70,52,0,Math.PI*2,false);
ctx.stroke();
};
var data = a.toDataURL(); 

Mais une fois transformé et affiché sa donne une image noir

Bah ouais normal, faut mettre le toDataurl dans le onLoad, comme le reste.

a écrit :
J'ai voulue passé en xhr sa: <img src="tous le code image64" /> mais visiblement sa me retour sa[object HTMLImageElement][Origin].

Sa doit vouloir dire que je ne peux pas, donc je me suis demandé comment récupéré ce qui ce trouve dans src sachant que la balise IMG ce trouve dans un variable data et tous sa en javascript ou jquery

Rien compris. Le src de ton img qui vaux data:blabla, c'est l'image encodée en base 64, donc ca ne t'avance pas plus que ça. Le xhr c'st pour envoyer des données au serveur. Tu peux le faire comme ca ou via un form normal, ça ne changera rien.

Encore une foi, à ce stade il faut que tu récuperes ton image encodée avec php, et que tu la décodes. Le problème n'est plus au niveau du js à ce stade la.

<img src="tous le code image64" /> sait ce que me retourne "var data = Canvas2Image.saveAsPNG(a, true);" je voudrais récupéré ce qui ce trouve dans le src

Je voulais me servir de xhr pour passé de la page js a la page php car je ne peux pas regargé la page par from

Et dans le src, tu vas retrouver la même chose que ce que te renvois canvas.toDataUrl(), donc ca ne sers à rien, tu peux zapper le Canvas2Image.

Et donc oui, sers toi de xhr pour renvoyer le résultat de toDataUrl() au server, sous forme de chaine de caractères.

En revanche, soit je m'exprime mal soit tu ne piges pas du tout ce que je t'expliques, mais on piétinne la. Si quelqu'un d'autre a mieux comme approche, c'est pas de refus.

Je pence avoir comprit ce que tu ma dit mais mon problème est que j'ai une erreur pour passé les donnée 64 par xhr et les récupéré en php

var a = document.getElementById('canvas_' + a[1]);
var ctx = a.getContext("2d");
var image = new Image(); 
image.src = 'tempo/'+ id +'/'+ nom_fichier.nom;
image.onload = function() {
ctx.drawImage(this,0,0,242,182);
ctx.beginPath();
ctx.strokeStyle = "#FF0015";
ctx.arc(130,70,50,0,Math.PI*2,false);
ctx.arc(130,70,51,0,Math.PI*2,false);
ctx.arc(130,70,52,0,Math.PI*2,false);
ctx.stroke();
var data = a.toDataURL();
console.log(data);
xhr.open('post', 'upload_64.php', true);
xhr.setRequestHeader('content-type', 'multipart/form-data');
xhr.setRequestHeader('image64', data);
xhr.send(file);
};

<?php
$headers = apache_request_headers();
$source = file_get_contents('php://input');

print_r($headers);

$data = "le code 64";
$data = base64_decode($data);
$img = imagecreatefromstring($data);
header('Content-Type: image/png');
imagepng($img);
?>

Et donc le code au dessus ca produit quoi? Le print_r écrits quoi, et l'image qu is'affiche ressemble à quoi?

T'es pas oblig de mettre xhr.setRequestHeader('content-type', 'multipart/form-data');, dans la mesure ou tu transfères du texte.

Quand je fais le console.log() de date sa me donne bien image avec le cercle en image 64.

Sa me donne une erreur sur xhr.send(file); - POST 400 (Bad Request)

et une autre erreur sur var nom fichier = jQuery.parseJSON(e.target.responseText); - Uncaught SyntaxErreur: Unexpected token <

Pour le fichier upload_64 obtiens sa:

Bad Request

Your Browser sent a request that this server could not understand
Size of a request header field exceeds server limit

image64

Bien je viens d'avoir une illumination tardive en faite dans xhr.send(file) il fallait faire xhr.send(data) maintenant j'ai bien image 64 dans le headers

J'ai toujours les même erreur mais sa au moins sa marche