Bulle BD sur une image, comment faire ?

Version imprimable

02/02/2015, 16h41
isa150183

Bulle BD sur une image, comment faire ?

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
02/02/2015, 17h06
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 ;)
02/02/2015, 19h03
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 :oops:
03/02/2015, 09h23
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

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

Code:

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

Code:

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à.

03/02/2015, 10h47
SpaceFrog

le download permet il de faire un force download ? ou fait il faire fichier > enregistrer sous ?
03/02/2015, 11h07
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.
03/02/2015, 11h27
SpaceFrog

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

http://caniuse.com/#search=download
03/02/2015, 11h31
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