Exporter une image au format SVG

**yarol** · 14/01/2018, 15h59

Bonjour,

J'ai récemment découvert JQuery Vector Maps après lecture de Vous pouvez désormais afficher vos cartes vectorielles en SVG.

J'ai créer des cartes interactives (avec changement de couleur, par exemple). Aucun souci, tout fonctionne.

Désormais, je voudrais ajouter un bouton proposant de télécharger la carte telle qu'elle est au moment où on souhaite l'exporter (au format png, jpg, voire svg).
Je ne trouve pas comment faire. Auriez vous une piste ? Y'a t-il un autre plugin pour ça ?

Merci d'avance pour votre aide.

**headmax** · 14/01/2018, 20h07

Salut et merci pour cet information

.

Envoyé par SylvainPV

Vu qu'il s'agit de SVG, est-il prévu d'ajouter une fonctionnalité de zoom progressif, à la molette par exemple ?

Il semblerait que oui voir https://codepen.io/headmax/pen/wpxomQ?editors=0010 mais l'effet provient du plugin jquery-mousewheel.js

Envoyé par yarol

Désormais, je voudrais ajouter un bouton proposant de télécharger la carte telle qu'elle est au moment où on souhaite l'exporter (au format png, jpg, voire svg).
Je ne trouve pas comment faire. Auriez vous une piste ? Y'a t-il un autre plugin pour ça ?

Js :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
document.querySelector(".link-download").addEventListener("click", (evt) => {
    const svgContent = document.querySelector("svg").outerHTML,
          blob = new Blob([svgContent], {
              type: "image/svg+xml"
          }),
          url = window.URL.createObjectURL(blob),
          link = evt.target;
 
    link.target = "_blank";
    link.download = "Illustration.svg";
    link.href = url;
});

Html :

Code html :

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

1
2
 
<a href="#" class="link-download">Télécharger le SVG</a>

voir exemple : https://codepen.io/headmax/pen/wpxomQ?editors=0010

**yarol** · 14/01/2018, 21h57

Merci pour le lien et les codes .... mais je n'arrive pas à les introduire dans mon exemple.
Pourriez vous m'aider à l'inscrire dans l'exemple basique ?

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
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>France Map for JQVMap / Gaël Jaffredo</title> 
 
    <link href="jqvmap.css" media="screen" rel="stylesheet" type="text/css" />
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.vmap.js" type="text/javascript"></script>
    <script src="jquery.vmap.france.js" type="text/javascript"></script>
    <script src="jquery.vmap.colorsFrance.js" type="text/javascript"></script>
 
	<script type="text/javascript">
        $(document).ready(function() {
                $('#francemap').vectorMap({
                    map: 'france_fr',
                        hoverOpacity: 0.5,
                        hoverColor: false,
                        backgroundColor: "#00ffff",
                        colors: couleurs,
                        borderColor: "#000000",
                        selectedColor: "#EC0000",
                        enableZoom: true,
                        showTooltip: true,
                    onRegionClick: function(element, code, region)
                    {
                        var message = 'Département : "'
                            + region 
                            + '" || Code : "'
                            + code
                                        + '"';
             
                        alert(message);
                    }
                });
        });
        
 
        document.querySelector(".link-download").addEventListener("click", (evt) => {
                const svgContent = document.querySelector("svg").outerHTML,
                        blob = new Blob([svgContent], {
                                type: "image/svg+xml"
                        }),
                        url = window.URL.createObjectURL(blob),
                        link = evt.target;
 
                        link.target = "_blank";
                        link.download = "Illustration.svg";
                        link.href = url;
        });
        </script>
  </head>
  <body>
    <div id="francemap" style="width: 960px; height: 704px;">
    </div>
    <div><a href="#" class="link-download">Télécharger le SVG</a></div>
  </body>
</html>

**yarol** · 15/01/2018, 00h30

désolé pour l'erreur de quote.

Je viens de trouver mon erreur :
à la place de document.querySelector("svg").outerHTML, il fallait inscrire document.querySelector("#francemap").outerHTML.

Par contre, la moindre "pollution" ajoutée à mon div génère un svg erroné. Par exemple, si les boutons de zoom sont présents alors le fichier svg est corrompu.

**headmax** · 15/01/2018, 06h03

Oui @yarol lorsqu'on zoom je pense que les datas ne sont plus valable dans ce cas de figure "essayé d'upload sur developpez.com les .svg ne sont pas accepté", l'image prendre en compte le zoom niveau client mais peut passé par différente extension (.gif, jpg, png) en passant par du langage côté serveur et utiliser des libs styles GD2 ou imagemagic...
Juste une conversion de svg a png ou jpg pourrait suffire a rendre l'image valide le zoom est conservé.
Après tout dépend de ton navigateur pour moi sous linux avec firefox developper j'ai pas ton problème

.

Nom : Illustration_0.png
Affichages : 462
Taille : 74,5 Ko

Nom : Illustration_2.png
Affichages : 463
Taille : 88,3 Ko

Nom : Illustration_3.png
Affichages : 448
Taille : 121,6 Ko

Exporter une image au format SVG

jQuery

Discussions similaires

Partager

Partager