Sauvegarder l'affichage d'une image dans un dossier avec un bouton !

**cincap** · 07/02/2016, 09h19

Bonjour à toutes et à tous,

Avec ce code, j'affiche le screenshot de la vue par mon vidéoparlophone et j'aurai aimé copier cette photo dans un dossier ou se trouve la page Html avec le bouton.

Chemin du dossier : C:\Data\Parlophone\

Code html :

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

1
2
3
4
5
6
7
8
9
...
<center><div class="bloc-variable">
 <IMG src="http://192.168.1.73:80/snapshot.cgi?user=admin&pwd=&t=" name="refresh" width="790" height="495" border="5" id="refresh" onload='reload()'></div>
<br>
<br>
<div id="p" onclick="">
<p>SnapShot</p></div>
  </BODY>
</html>

En vous remerciant,

@+,

Cincap

**progdebutant** · 07/02/2016, 15h39

Salut

En javascript je pense pas qu'on puisse sauver dans un fichier, mis à part le cookie, il faut donc que tu utilises le langage php, regarde comment créer un fichier avec php

**cincap** · 08/02/2016, 17h07

Bonjour à toutes et à tous,

@ progdebutant, merci pour ta réponse.

Je n'avais rien trouvé sur le net pour cette question ce qui est étonnant c'est quand j'ouvre le fichier html, la photo apparait indépendamment du code concernant le timing de l'affichage et si je maintiens l'image pour l'ouvrir sur un autre onglet de Iexploreur, j'obtiens bien une photo qui se nomme snapshot.JPG

De là, je pensais que l'on pourrait la sauver.

Maintenant en php, je n'ai jamais codé.

@+,

cincap

**progdebutant** · 08/02/2016, 20h44

Salut

Pour sauver dans un fichier une image qui se trouve sur une page HTML il n'y a que deux méthodes à mon avis, soit à la main directement en cliquant dessus avec le bouton droit de la souris puis en cliquant sur "enregistrer l'image sous..." soit avec un petit code javascript qui va détecter l'image sur la page et lancer un petit code PHP pour enregistrer l'image trouvée directement vers un fichier.
Moi j'en sais pas plus malheureusement, car si l'image est sur ton site le petit code javascript ça serait un truc dans le genre :

Dans le fichier HTML :

Code :

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

<img src="adresse de l'image" id="nom de l'image" alt="description de l'image" onclick="enregistre(this.id);" />

Dans le fichier javascript :

Code :

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

1
2
3
function enregistre(image){
// ici le code PHP pour enregistre l'image dans un fichier.
}

Je t'aide pas beaucoup avec ce code incomplet, c'est pour te donner une idée c'est tout, je ne sais pas mélanger le javascript avec le PHP pour le moment

Et ça mettra les pros dans le principe pour te donner une meilleure solution plus précise

**ABCIWEB** · 09/02/2016, 00h09

Oui je confirme, avec javascript côté client tu ne pourras pas directement charger un fichier sur le serveur. Tu peux éventuellement passer l'adresse de l'image dans une requête ajax et dans le script php :

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
$url = 'http://www.developpez.net/template/images/logo.png';
 
$path = pathinfo($url);
// vérification de l'extension pour ne pas télécharger n'importe quoi
$extension = isset($path['extension']) ? strtolower($path['extension']) : null;
if(in_array($extension, array('jpg','jpeg','png','gif')))
{
	$dossier = 'dossier_destination/';
        // ajoute un préfixe 'copy_'
	$nouveau_nom = 'copy_'.$path['basename'];
 
	// Ouvre un fichier pour lire un contenu existant
	$current = file_get_contents($url);
	// Ecrit dans la destination
	file_put_contents($dossier.$nouveau_nom, $current);
}

Attention sans vérification les nouveaux fichiers écraseront les anciens de même nom.

**cincap** · 09/02/2016, 08h55

Bonjour à toutes et à tous,

@ ABCIWEB et @ progdebutant, grand merci pour vos suggestions.

En fait, l'image se trouve sur ma page Web dès que le fichier html est ouvert car cette image provient de mon vidéo parlophone et à l'ouverture le screenshot est actif.

Et avec une routine en JavaScript, cette image est dynamique en temps réel et me permet donc de voir les voitures qui s'introduisent dans le chemin qui mène à ma propriété.

Si avec le click droit je fais "Enregistrer sous", un nom apparait avec son extension soit "Snapshot.JPG" alors que je ne la nomme pas.

Je vais tester vos suggestions et je reviens vers vous.

@+,

cincap

**progdebutant** · 09/02/2016, 12h45

Oui à mon avis c'est ça, c'est le nom de la photo, les webcam et d'autres systemes de photos nomment comme ça les images qu'ils prennent.

**cincap** · 09/02/2016, 16h27

@ progdebutant

Avec le code remanié, pas de succès !

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
 
<script language="JavaScript" type="text/javascript">
function enregistre(image){
$url = http://192.168.1.73:80/snapshot.cgi?user=admin&pwd=&t=" name="refresh" width="790" height="495" border="5"/snapshot.jpg';
 
$path = pathinfo($url);
// vérification de l'extension pour ne pas télécharger n'importe quoi
$extension = isset($path['extension']) ? strtolower($path['extension']) : null;
if(in_array($extension, array('jpg','jpeg','png','gif')))
{
	$dossier = 'C:/Data/Cincap/Barrières/Parlophone/TopSaful/Viewer/';
        // ajoute un préfixe 'copy_'
	$nouveau_nom = 'copy_'.$path['basename'];
 
	// Ouvre un fichier pour lire un contenu existant
	$current = file_get_contents($url);
	// Ecrit dans la destination
	file_put_contents($dossier.$nouveau_nom, $current);
}
}
</script>
 
...
<center><div class="bloc-variable">
 <IMG src="http://192.168.1.73:80/snapshot.cgi?user=admin&pwd=&t=" name="refresh" width="790" height="495" border="5" id="refresh" onload='reload()'></div>
<br>
<br>
<div id="p" onclick="enregistre(refresh);">
<p>SnapShot</p></div>
  </BODY>
</html>

@+,

cincap

**progdebutant** · 09/02/2016, 19h56

J'ai vu que tu as mis l'extension de snapshot.JPG en majuscule dans l'autre post plus haut, c'est parce que l'image a une extention jpg en majuscule ?
Si c'est ça alors l'erreur est fort possible de ce coté vu que le PHP fait attention à la casse il me semble.

Si l'image a réellement une extension jpg en majuscules alors dans cette ligne, ajoute l'extention en majuscules : JPG

if(in_array($extension, array('jpg','jpeg','png','gif'))

Et puis vérifie le nombre de parenthèses voir s'il est bon, y en a pas une en trop là ? :

Code :

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

if(in_array($extension, array('jpg','jpeg','png','gif')))

C'est pareil pour les dossiers, vérifie qu'ils portent bien les noms avec ou sans majuscules :
$dossier = 'C:/Data/Cincap/Barrières/Parlophone/TopSaful/Viewer/';

Si tes vrais dossiers sont en minuscules (ce que je crois) alors il faut mettre en minuscules ces paramètres de noms de dossiers :

Code :

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

$dossier = 'C:/Data/Cincap/Barrières/Parlophone/TopSaful/Viewer/';

afin de les faire correspondre à tes vrais dossiers.

**NoSmoking** · 09/02/2016, 21h51

Bonjour,
@progdebutant :

Code :

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

1
2
3
function enregistre(image){
// ici le code PHP pour enregistre l'image dans un fichier.
}

Javascript = coté client
PHP = coté serveur

coté client les commandes PHP sont inconnues.
Je ne commente pas le reste !

@cincap :
Si ce fichier est affiché dans ta page c'est qu'il existe quelque part donc pourquoi ne pas le sauvegarder à la source ?

Un autre façon de faire serait de mettre cette image dans un <canvas> pour en récupérer le "data:image/png;base64" puis de l'envoyer sur le serveur pour enregistrement.

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
  var canvas = document.getElementById('id_canvas'),
      context = canvas.getContext('2d'),
      oImage = new Image();
  // fonction sur le load
  oImage.onload = function() {
      var larg = this.width,
          haut = this.height,
          dataURL;
      // dimensionne le canvas
      canvas.width = larg;
      canvas.height = haut;
      // dessine image
      context.drawImage( this, 0, 0);
      // récup. data:image/png;base64
      dataURL = canvas.toDataURL();
      // juste pour voir
      window.open( dataURL, 'image');
  };
  // affectation source
  oImage.src = 'le_nom_de_l_image';

**progdebutant** · 10/02/2016, 10h49

Javascript = coté client
PHP = coté serveur

Je vois ce que tu veux dire, merci Nosmoking !

C'est vrai que c'est mieux de séparer, mais j'avais pas d'autres solutions.
Ton idée du canvas c'est génial ! +10 heu non on peut pas :/

**cincap** · 11/02/2016, 14h31

Bonjour à toutes et à tous,

@ progdebutant, merci de ton intervention, le mot JPG en majuscule est la correction de la page lorsque je l'ai mis.

@ NoSmoking, salut Maître, en fait l'image n'est nulle part sauf dans la commande Cgi du vidéoparlophone soit :

Code :

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

1
2
 
<IMG src="http://192.168.1.73:80/snapshot.cgi?user=admin&pwd=&t=" name="refresh" width="790" height="495" border="5" id="refresh" onload='reload()'>

Cette commande permet d'afficher le screenshot dès que la page est ouverte dans la balise image en donnant principalement l'ip, le port, l'user, le pwd etc.

La fonction "reload()" permet de rafraîchir cette image pour simuler une vidéo en temps réel.

Si je clique avec le click droit et que je fait "Enregistrer l'image sous", l'image est nommée automatiquement "snapshot.jpg" d'où l'idée d'essayer de la copier dans le dossier ou se trouve la page web.

Je vais essayer de mettre cette page en attache.

@+,

cincap

**NoSmoking** · 11/02/2016, 20h23

As tu essayé en mettant

Code :

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

1
2
 // affectation source
  oImage.src = 'http://192.168.1.73:80/snapshot.cgi?user=admin&pwd=&t=';

**ABCIWEB** · 12/02/2016, 04h45

Et ce serait pas le onload='reload()' qui mettrait la zizanie ?
Je vois pas de fonction "reload()" définie dans ton extrait de code et si ça recharge en continu faudrait peut-être le désactiver durant la capture de l'image ?

Sinon j'avais donné un exemple de code côté serveur. Il restait juste à faire une requête ajax côté client pour récupérer onclick sur un bouton, l'url de l'image pour l'envoyer vers le script. C'était plus simple, moins gourmand en ressources donc plus rapide, et le résultat aurait été meilleur car parfois canvas détériore plus ou moins les images jpg suivant la présence de dégradés. Perso j'utiliserais canvas uniquement en dernier recours.

**cincap** · 12/02/2016, 08h34

Bonjour à toutes et à tous,

@ ABCIWEB et @ NoSmoking, merci pour votre aide, il est évident que si j'enlève le script du reload que j'ai d'ailleurs modifié pour que le résultat soit le plus proche d'une caméra de surveillance, j'obtiens bien le snapshot comme image fixe sur la page web mais impossible de la sauver !

Voici le code en entier avec le bouton personnalisé et l'ombre du conteneur image :

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
<head>
<title>PARLOPHONE</title>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<!--Bouton personnalisé-->
<style type="text/css">
p{
     font-family: Arial,sans-serif;
     font-size: 1.4em;
     width: 800px;
     height: 30px;
     padding-top: 7px; /*permet le centrage vertical*/
     text-align: center;
     color: #000;
     background: #444;
     background: linear-gradient( #555, #2C2C2C);
     border-radius: 8px;
     text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
     box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5),
                 0 -1px 0 rgba( 255, 255, 255, 0.4);
}
p:hover{
     color: #222;
     background: #555;
     background: linear-gradient( #777, #333);
     cursor: url(Main1.cur), auto;    
}
p:active{
     color: #000;
     background: #444;
     background: linear-gradient( #555, #2C2C2C);
     box-shadow: 1px 1px 10px black inset, 
                 0 1px 0 rgba( 255, 255, 255, 0.4);     
}
</style>
<!--Bande noire avec heure et date-->
<style type="text/css">
#banderole {
background-color:black;
min-width:720px;
}
#banderole .heure {
color:rgb(0,0,255);
font-size:32px;
float:left;
margin-left: 10;
}
#banderole .date {
color:rgb(0,0,255);
font-size:32px;
float:right;
margin-right: 10;
}
#banderole .titre {
color:rgb(255,255,255);
text-align:center;
}
</style>
<!--Position des lecteurs avec Div-->
<style type="text/css">
.bloc-fixe { 
   position:fixed;
   border:solid 10px;
   border-color:  #C0C0C0;
   box-shadow: 6px 6px 6px black;
   width:800px;
   height:505px;
   top:50px;
   left:center;
   bottom:10px;
 }
.bloc-variable { 
   position:relative;
   border:outset 10px;
   border-color: #C0C0C0;  
   box-shadow: 6px 6px 6px black;
   width:800px;
   height:505px;
   top:50px;
   left:center;
   bottom:10px;   
 }
.btn_taille_egale{
   width:830px;
}
</style>
</head>
<BODY BACKGROUND="0102.jpg" marginwidth="50" marginheight="50" topmargin="50" leftmargin="center">
<div id="banderole">
<h1 class="titre">PARLOPHONE BARRIERES AVANT</h1>
</div>
<center><div class="bloc-variable">
 <IMG src="http://192.168.1.73:80/snapshot.cgi?user=admin&pwd=&t=" name="vdp" width="790" height="495" 
 
border="5" id="refresh"></div>
<SCRIPT language="JavaScript" type="text/javascript"> 
 var t = 25 // Interval en Secondes
 image = "http://192.168.1.73:80/snapshot.cgi?user=admin&pwd=&t=" 
 function Start() { 
 tmp = new Date(); 
 tmp = "?"+tmp.getTime() 
 //document.images["vdp"].src = image+tmp 
document.getElementById("refresh").src = image+tmp
 setTimeout( Start, t*10)
 } 
 Start(); 
 </SCRIPT> 
  </BODY>
</html>

Concernant l'image à sauver dans le même dossier cela parait simple avec le code du snapshot mais c'est une autre chose !

Sinon, à la limite je fais un printscreen de la page.

@+,

cincap

**progdebutant** · 12/02/2016, 15h04

Salut

Ah je comprend mieux ce que tu veux faire maintenant, l'image est à une adresse web.
Avec une page à toi en php tu ne pourrais pas charger cette adresse web sur ta page et la copier vers un fichier avec PHP ?

**cincap** · 12/02/2016, 15h27

@ progdebutant,

En fait l'adresse web est l'adresse Ip + son port du vidéoparlophone qui fonctionne avec prise Cpl sur le 220V puisqu'il est placé à une distance de 100M de la porte d'entrée et que le Wifi était limite.

L'image apparait dès le chargement de la page.

Si je clique droit je peus l'enregistrer et automatiquement elle se nomme snapshot.jpg mais elle aura le format plus petit que l'image.

Cela parait simple mais je cale en html.

Si je programme une application avec Delphi et le lecteur Vlc, je peus faire un print uniquement dans mon dossier et je pense que je vais garder cette approche.

Merci,

@+,

cincap

**ABCIWEB** · 12/02/2016, 17h32

La question est la suivante :

Débrouille-toi pour désactiver le reload le temps d'un test, et quand l'image est affichée, copies et colle son adresse directement dans la barre d'adresse d'un navigateur. Si elle s'affiche tu pourras utiliser la méthode que j'ai indiquée et qui est la plus simple. Sinon tu peux tenter canvas qui offre peut-être plus de possibilités pour récupérer la ressource image dans ce contexte.

**Eric2a** · 12/02/2016, 19h00

Salut,

Essaie ce code (désolé si j'ai pas appliqué ton style)

Code html :

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Parlophone</title>
	<meta name="description" content="Barrières avant" />
	<style type="text/css">
                body{color:#000;background-color:#369}
 
                .center{width:820px;margin:0 auto;text-align:center}
 
                h1{margin:0.5em 0;padding:0.5em}
 
                canvas{border:2px #ccc solid;box-shadow:6px 6px 6px black;margin:0;background-color:#000}
 
                p{margin:2em 0 0 0}
 
                a{      color:#eee;background:#444;font-size:1.2em;text-decoration:none;
                        display:block;padding:1em;
                        background:linear-gradient(#555,#2c2c2c);
                        border-radius:8px;
                        text-shadow:0 1px 0 rgba(255,255,255,0.2);
                        box-shadow: 0 0 5px rgba(0,0,0,0.5),
                                                0 -1px 0 rgba(255,255,255,0.4);
                }
                a:hover{background:#555;background:linear-gradient(#777,#333)}
        </style>
	<script type="text/javascript">
                var parlophone=function(){
                        var canvas,ctx,link;
 
                        function download(){
                                link.download='snapshot.png';
                                link.href=canvas.toDataURL('image/png');
                        }
 
                        function drawing(){
                                var img=new Image();
                                img.src='http://192.168.1.73:80/snapshot.cgi?user=admin&pwd=&t=&time='+(new Date).getTime();
                                img.onload=function(){
                                        ctx.clearRect(0,0,canvas.width,canvas.height);
                                        ctx.drawImage(img,0,0);
                                        setTimeout(drawing,25000);
                                };
                        }
 
                        return function(){
                                canvas=document.getElementById('snapshot');
                                ctx=canvas.getContext('2d');
                                link=document.getElementById('download');
                                link.onclick=download;
                                drawing();
                        };
                }();
 
                window.onload=parlophone;
        </script>
</head>
<body>
	<div class="center">
		<h1>Parlophone - Barrières avant</h1>
		<canvas width="790" height="495" id="snapshot"></canvas>
		<p><a href="#" id="download">Téléchargement de l'image</a></p>
	</div>
</body>
</html>

Si le téléchargement ne démarre pas et que la console Web contient le message

SecurityError: The operation is insecure.

Il faudrait déplacer la page Web de manière à y accéder depuis le domaine

http://192.168.1.73:80/Parlophone.htm

Mais je ne sais pas si cela est possible.

De toutes manières, et tu l'as bien dis, il serait préfèrable de faire cela en Delphi. Il te faut juste trouver le composant adapté à ta version.

Exemple

Capture d'image par Webcam

**cincap** · 13/02/2016, 09h47

Bonjour à toutes et à tous,

Merci pour vos suggestions.

Je précise que ma page Web est en relation permanente avec l'adresse Ip de mon vidéoparlophone dès son ouverture.

@ ABCIWEB, merci de ta réponse, voici ce qui s'affiche dans la barre d'adresse dès que je clique sur l'image et que je la déplace sur une autre page :

http://192.168.1.73:80/snapshot.cgi?user=admin&pwd=&t=

Et l'image est affichée.

Par contre quand je la sauve avec le menu du click droit, la j'obtiens un nom et une extension soit "snapshot.jpg" à la taille de la résolution du capteur du vidéoparlophone.

@ Eric2a, merci pour ta suggestion, j'ai testé, j'obtiens une photo réduite (taille résolution capteur) dans le cadre mais si je clique sur le bouton rien ne se passe et je n'ai pas la photo dans le dossier ou se trouve la page.

Peut être qu'il faut préciser son chemin dans le code ?

A mon avis, Windows ne permet pas une sauvegarde directe !

@+,

cincap

Sauvegarder l'affichage d'une image dans un dossier avec un bouton !

JavaScript

Discussions similaires

Partager

Partager