Ajouter un bouton pour sauver l'image apparue sur la page !

Version imprimable

23/08/2019, 08h40
cincap

Ajouter un bouton pour sauver l'image apparue sur la page !
Bonjour à toutes et à tous,

Sur une page au format .html, je visionne la vue de mon videoparlophone qui est devant la propriété.

J'aimerai ajouter un bouton qui me sauve cette image (comparable au click droit "Enregistrer sous").

Le script utilisé pour l'affichage de l'image :
Code:

1 2 3 4 <div class="col-sm-3"> <img id="snapshot" src="" alt="Pas d'image disponible" class="img img-responsive" /> </div>
Merci d'avance.

@+,

cincap
27/08/2019, 08h06
Sparky95

salut,
La video est vraiment de mauvaise qualité audio mais je penses que c'est ce que tu recherches
https://www.youtube.com/watch?v=9A5sxf2bJeY
27/08/2019, 20h33
cincap

Bonsoir à toutes et à tous,

@ Sparky95, merci de ton intervention.

Mais cela n'est pas cela que je recherche.

J'ai un fichier de type .html qui me permet de voir la vue de mon vidéoparlophone en temps réel.

Donc sur ma page, la vue s'affiche et c'est cette vue que j'aimerai sauver dans un dossier comme avec le click droit.

Donc ajouter un bouton et le code pour la copie et du coller dans un dossier défini à l'avance.

@+,

cincap
28/08/2019, 21h46
Invité
Bonjour,

Que ce soit sur un Pc ou un smartphone, il existe déjà une fonctionnalité qui permet d'effectuer une "copie d'écran".

Sinon : :recherch: "Capture d'écran en Javascript"
- Capture d'écran en Javascript
- html2canvas
29/08/2019, 07h04
cincap

Bonjour à toutes et à tous,

@ jreaux62, merci pour ta suggestion.

En fait lorsque je me connecte à Internet, j'ai sur une page web une balise qui affiche une petite image du videoparlophone et c'est uniquement cette image que j'aimerai copier par un code semblable au clic droit "Enregistrer l'image sous…" sinon je m'en contenterai.

Je ne pense pas que cela soit possible car j'ai testé assez bien des suggestions !

@+,

cincap
29/08/2019, 11h24
Sparky95

Citation:

Envoyé par jreaux62

Que ce soit sur un Pc ou un smartphone, il existe déjà une fonctionnalité qui permet d'effectuer une "copie d'écran".

hahaahahah c'est la manière la plus simple et je n'y avais même pas pensé bien vu :p

sinon pour en revenir au poste, essaye lightshot qui est un programme qui facilite les captures d'écran ciblés.

Après concernant la video es-tu sure que cela n'ailles pas?
Car la seul différence (je penses) entre ce que tu nous a expliqué et cette vidéo est, que lui utilises une web-cam et toi une camera extérieur.
Mais au final ta page HTML (normalement) transforme le résultat de ta camera en video comme la web-cam le fait "à priori".
29/08/2019, 15h57
cincap

Bonjour à toutes et à tous,

@ Sparky95,

Merci de ta réponse, Windows 10 dernière version a optimiser sa capture d'écran soit avec la combinaison des touches "Windows + Majuscule + S" ou avec la touche "prt sc" ce qui permet de faire une capture réglable soit rectangle soit main libre soit tout l'écran.

Sur ma page web le click droit sur l'image le permet aussi.

Mais j'aurai aimé rajouté à ma page web cet automatisme.

En Delphi, ma petite application me permet de le faire et même d'agrandir la vue plein écran.

Je vais laisser ce topic ouvert on ne sait jamais.

Merci à tous,

@+,

cincap

1- LOL...
Je viens de tomber sur cette discussion : "Sauvegarder l'affichage d'une image dans un dossier avec un bouton", ouverte par... un certain cincap en février 2016 ! :aie:
Sérieux ? Ça fait plus de trois ans 1/2 que tu cherches ?? :arf:

2- J'ai aussi trouvé ça :

l'attribut "download" de la balise <a> (voir compatibilité)

Citation:

Cet attribut indique au navigateur de télécharger l'objet vers lequel pointe l'URL plutôt que d'y diriger l'utilisateur.
[...]

Du coup, je me dis qu'un simple lien <a> devrait faire la farce :
Code:

1 2 3 4 <div class="col-sm-3"> <img id="snapshot" src="" alt="" class="img img-responsive" /> </div> <a href="" onclick="this.href=document.querySelector('#snapshot').src;" download="snapshot.jpg">Télécharger le snapshot</a>
Car d'après ce que j'ai cru comprendre, l'attribut src de l'<img> est remplit dynamiquement, non ?

29/08/2019, 18h50
cincap
@ jreaux62, merci de ta réponse, je vais tester ta suggestion et dirai quoi.

En fait le topic n'a jamais été fermé.

Depuis, je suis passé à autres choses et j'ai changé d'ordinateur et de système soit Windows 10 64 bits dernière génération.

Entre temps, je me suis programmé une application Avec Delphi 6 afin de vérifier qui sonne à mon parlophone et la comme déjà dit je sais prendre une photo.

Avec l'application dédiée sur mon Gsm, depuis l'Ios > 11.0 actuellement 12.1, la notification ne se fait plus en mode verrouillé et donc j'ai du activer le mode alarme de ce vidéoparlophone.

Avec une commande cgi il est aussi possible de le faire mais comment l'interprétée pour une page Web ?
Code:

1 2 http://192.168.1.63:80/snapshot.cgi?user=ad&pwd=mot de passe&next_url=
Voila voilou,

@+

cincap

1 pièce(s) jointe(s)

@ tous,

Voici la partie code qui affiche la vue du videoparlophone :

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
 
<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.167.1.30:55/snapshot.cgi?user=&pwd=1&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>

@ jreaux62, j'ai testé et j'obtiens une erreur voir photo.

29/08/2019, 20h53
Sparky95

L'erreur ne se fait que sur Edge? (je sais que IE ne respectait pas toujours les règles donc edge probablement également)
27/11/2019, 20h57
Attitude420

Merci pour vos réponses