up/downloader une image generee cote client

**Zelea** · 28/03/2012, 15h22

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

**SpaceFrog** · 29/03/2012, 08h36

un script js qui génère un png ????
Je serais curieux de voir ça ...

**Bovino** · 29/03/2012, 08h42

Bah... rien de plus facile !

Code :

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

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

EDIT : Plus sérieusement, avec des balises <canvas>, il me semble qu'il y a des possibilités

**SpaceFrog** · 29/03/2012, 08h49

Du coup il faudrait passer le string binaire au serveur pour enregistrer l'image avec gdlib ?

**Zelea** · 29/03/2012, 10h08

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 :

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

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

**Bovino** · 29/03/2012, 10h23

Envoyé par Zelea

Je suis toujours ecossais dans l'ame

Faut surtout pas dire ça à Spaffy !

**SpaceFrog** · 29/03/2012, 10h56

**Bovino** · 29/03/2012, 11h12

Code :

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

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>

up/downloader une image generee cote client

JavaScript

Discussions similaires

Partager

Partager