up/downloader une image generee cote client

Version imprimable

28/03/2012, 15h22
Zelea

up/downloader une image generee cote client

Bonjour tout le monde,

Voila mon petit probleme...
Actuellement mon script JS genere un png cote client. L'utilisateur peut le sauvegarder en utilisant le clique droit ...
Ce a quoi je voudrais arriver serait que ce soit (une hypothese) le serveur qui le renvoie pour que la sauvegarde soit plus "propre" (avec boite de dialogue, sauvegardez sous ...) ... Argument principal : mon png a une dimension exageree que pour etre affiche sur la page et si je reduis la taille, le rendu est assez mauvais (l'image est un graphique, donc les lignes disparaissent par endroit).

Merci d'avance
29/03/2012, 08h36
SpaceFrog

un script js qui génère un png ????
Je serais curieux de voir ça ...
29/03/2012, 08h42
Bovino

Bah... rien de plus facile !

Code:

document.write('<img src="toto.png" />');

:mouarf:

EDIT : Plus sérieusement, avec des balises <canvas>, il me semble qu'il y a des possibilités ;)
29/03/2012, 08h49
SpaceFrog

Du coup il faudrait passer le string binaire au serveur pour enregistrer l'image avec gdlib ?
29/03/2012, 10h08
Zelea

Oui, j'utilise une librairie qui transforme les canvas en png ...
mais j'ai aucune idee de comment transmettre cette image vers le serveur pour ensuite faire un

Code:

window.open(script php qui envoie le fichier par http)

Je suis toujours ecossais dans l'ame et les ressources serveurs sont toujours epargnees des qu'elles le peuvent... :D
29/03/2012, 10h23
Bovino

Citation:

Envoyé par Zelea

Je suis toujours ecossais dans l'ame

Faut surtout pas dire ça à Spaffy ! :mrgreen:
29/03/2012, 10h56
SpaceFrog

:ptdr: http://sk-martin.developpez.com/Smileys/scott.gif

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!doctype html>
<html>
    <head>
		<meta charset="utf-8" />
		<title>Spaffy rules</title>
		<style>
			.spaffy {
				position: relative;
				width: 480px;
				min-width: 480px;
				height: 300px;
				min-height: 300px;
				overflow: hidden;
				margin: 20px auto;
				outline: 5px solid gray;
			}
			.spaffy.bg-blue {
				background-color: #0065BD;
			}
			.l-white {
				position: absolute;
				width: 600px;
				height: 45px;
				background-color: #fefefe;
			}
			.l-white.l-up-r-down {
				left: 0px;
				top: 0px;
				-webkit-transform: rotate(32deg) translate(20px, 145px);
				-moz-transform: rotate(32deg) translate(20px, 145px);
				-o-transform: rotate(32deg) translate(20px, 145px);
				-ms-transform: rotate(32deg) translate(20px, 145px);
				transform: rotate(32deg) translate(20px, 145px);
			}
			.l-white.r-down-l-up {
				left: 0px;
				top: 0px;
				-webkit-transform: rotate(-32deg) translate(-120px, 82px);
				-moz-transform: rotate(-32deg) translate(-120px, 82px);
				-o-transform: rotate(-32deg) translate(-120px, 82px);
				-ms-transform: rotate(-32deg) translate(-120px, 82px);
				transform: rotate(-32deg) translate(-120px, 82px);
			}
		</style>
    </head>
    <body>
		<div class="spaffy bg-blue">
			<div class="l-white l-up-r-down"></div>
			<div class="l-white r-down-l-up"></div>
		</div>
    </body>
</html>

:zoubi: