Discussion :

[isa150183]

Bonjour
Pourriez vous m'indiquer des pistes, ou un code, ou alors où chercher pour ce que je veux faire :
Sur une page : une photo, une bulle de bd vide qui peut se deplacer et s'agrandir sur la photo, un texte qu'on deplace dans la bulle et une bouton sauver l'image
J'utilise PHP, comment faire ?
Un grand merci !!
Isa

[Celira]

Si je comprends bien, tu affiches une image et tu veux pouvoir dessiner dessus et enregistrer l'image résultat.
Fondamentalement, PHP peut faire de la modification d'images (avec des choses avec GD...) et enregistrer un fichier envoyé par formulaire. Mais si tu veux faire des modifications dynamiques dans ta page Web, ce n'est pas avec PHP que tu vas faire ça.

Je réoriente la question avec les Javascripteurs

[isa150183]

oui c'est ca tu as bien compris
merci pour la redirection !

Je cherche depuis plus de 3H et je ne trouve pas en fait une zone avec une image où je peux drag and drop une image bulle et un texte, et sauver toute la zone construite en une seule image

[SpaceFrog]

C'est plutot un boulot pour canvas
ou du svg...
http://blogs.msdn.com/b/tims/archive...e-bullets.aspx

mais pour l'export en image ... il m'est avis qu'il faudra repasser par le serveur

[Theta]

Pas besoin de repasser par le serveur, la fonction canvas.toDataURL permet de créer une url menant vers l'image.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<canvas id="canvas" width="100" height="100" ></canvas>
<a id="download" download="image.png">Dowload</a>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
window.onload = function() {
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	ctx.fillStyle = "orange";
	ctx.fillRect(0, 0, 100, 100);
	ctx.fillStyle = "black";
	ctx.fillRect(20, 20, 60, 60);
	ctx.fillStyle = "yellow";
	ctx.fillRect(40, 40, 20, 20);
	var img = canvas.toDataURL("image/png");
	var download = document.getElementById("download");
	download.href = img;
}

Sinon sur firefox et chrome clic droit sur un canvas, enregister sous, et voilà.

[SpaceFrog]

le download permet il de faire un force download ? ou fait il faire fichier > enregistrer sous ?