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 ?

[Theta]

Sans le dowload le navigateur ouvre le png dans une nouvelle page, avec il enregistre sur le disque. Au passage ça permet de changer le nom de fichier vu que l'url générée est assez immonde.

Après je ne sais pas si tous les navigateurs réagissent de la même manière ou s'il y a une meilleure façon de faire.

[SpaceFrog]

malheureusement, je confirme ce que je pensais en proposant de passer par le serveur pour la sauvegarde ...

http://caniuse.com/#search=download

[isa150183]

merci pour vos liens
j'ai vu le code mais comment l'utiliser ?
Je voudrais que ce soit tres simple : sur la page: une photo, je glisse la bulle dessus, je glisse du texte dessus, et je clique sur le bouton sauvegarder en JPG
En tout cas merci beaucoup pour votre aide ça fait plaisir