web-dev-qa-db-fra.com

Copier les images SVG du navigateur dans le presse-papier

Je développe une application Web qui prend des entrées utilisateur, les calculs d'ingénierie, puis affichent un rapport ou un graphique formaté. Les graphiques sont des diagrammes d'ingénierie et pas toujours des graphiques standard tels que des graphiques à tarte. La fonction principale de l'application consiste à permettre à l'utilisateur de copier ces diagrammes du navigateur à un document Word ou Excel.

Je dois choisir d'utiliser SVG généré dans le client ou des bitmaps générés sur le côté serveur. Je préfère que l'approche SVG et le prototypage semble bien, cependant, la copie du graphique SVG semble être prise en charge de manière incohérente entre navigateurs, en particulier si le graphique est affiché dans un div (c'est-à-dire la page complète n'est pas .svg). Par exemple, IE affiche une "copie" sur la liste déroulante, mais copie une seule partie du graphique SVG dans le presse-papiers. Chrome ne donne aucune option de copie si je Cliquez avec le bouton droit sur le graphique SVG.

Si je suis Google, je suis surpris de voir à quel point il est peu d'informations sur le problème de l'obtention d'une image SVG à partir d'une application Web sur le presse-papiers.

Ma question pour lecteurs qui ont travaillé à travers ce problème:

  1. Y a-t-il un moyen cohérent d'obtenir un élément SVG qui fait partie d'un plus grand DOM sur le presse-papiers, en utilisant de préférence JavaScript;

  2. Toute autre recommandation donnée à mon exigence d'obtenir des graphiques du navigateur sur le presse-papiers?

google-chromesvgclipboard
22
Fritz45

Au lieu d'afficher le svg comme élément SVG l'affiche avec la balise img. Cela dispose de certaines limitations (vous ne pouvez pas afficher les polices personnalisées ou incorporer des scripts, mais il semble que ce ne soit pas votre cas d'utilisation). L'avantage est que cela se comporte exactement comme vous l'attendez d'une image (vous pouvez faire glisser et déposer, cliquer avec droit et copier, etc.).

Pour ce faire, vous devez le coder avec base64. Vous pouvez le faire le serveur ou le côté client avec JS. Votre étiquette d'image finit par regarder quelque chose comme ...

<img src="data:image/svg;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolf" width="..." height="..." alt="diagram" />

Où R0lGODlhEAAQAMQ... est votre SVG codé de base64.

13
methodofaction

JavaScript et le presse-papiers est une douleur dans l'A **.

Il y a une solution de contournement pour votre situation que je connais:

S'il s'agit d'un vrai fichier SVG, en Chrome, cliquez avec le bouton droit de la souris sur l'image et sélectionnez "Inspecter l'élément". La console du navigateur s'ouvrira et devrait s'ouvrir à un élément SVG que vous pouvez sélectionner dans l'inspecteur. Faites un clic droit sur la balise SVG dans l'inspecteur et sélectionnez 'Copier' ou 'Copier comme HTML' (Je ne peux pas rappeler les choix exactement)

Collez ce texte dans un fichier texte, puis enregistrez le fichier avec une extension SVG. Il peut ensuite être ouvert dans n'importe quel programme de navigateur ou d'édition SVG. Inkscape est un bon choix pour l'édition et le débogage, comme vous pouvez afficher et éditer l'ensemble du fichier SVG dans un éditeur de style XML.

* * Désolé - j'ai raté la première partie de votre demande. Ce sera délicat. J'ai bien peur de ne pouvoir m'empêcher de cette partie. Copier et coller n'est probablement pas votre meilleure option cependant. Il y a PHP CLASSES pour manipuler les fichiers SVG et Excel, et ce sera probablement la voie à suivre.

1
dgo

J'ai réussi à copier le contenu SVG dans le presse-papiers en tant que texte de XML uni, mais il est apparu inutile pour moi, car l'inkscape (que j'utilise pour travailler avec SVG), ne reconnaît pas le texte dans le texte du Presse-papiers en tant que SVG . Il semble que la copie de texte de SVG ne soit pas suffisante et que le navigateur doit également régler le type MIME sur image/svg+xml.

J'ai essayé plusieurs astuces avec une API de presse-papiers HTML5, mais j'ai terminé avec le problème que Chrome est incapable d'exporter le type MIME dans le presse-papiers système. Le rapport de bogue correspondant et le lien JSFIDDLE pour cela sont ici - https://code.google.com/p/chromium/issues/detail?id=5047

1
anatoly techtonik

J'ai confronté le même problème dans un projet. Le client souhaitait avoir un graphique plutôt compliqué. Nous avons décidé de le développer à l'aide de SVG. Travaillé parfait, mais le client souhaitait pouvoir télécharger le graphique comme photo. Après une recherche sur Internet, nous avons trouvé Savesvgaspng ( https://www.npmjs.com/package/save-svg-as-png ). Cela a fait l'affaire pour nous.

Le graphique est dans la page comme ceci:

<svg id="graph1" style="width: 700px; height: 700px">
....
.....
...
</svg>

Le graphique est affiché, mais ne peut pas être téléchargé ou copié. Alors, voici les étapes que j'ai prises:

  1. J'ai installé le paquet mentionné ci-dessus.
<script src="/path/to/lib/save-svg-as-png/lib/saveSvgAsPng.js"></script>
  1. Ajout de "Affichage: Aucun:" Pour le code SVG, sinon nous aurons deux instances de la même image:
<svg id="graph1" style="width: 700px; height: 700px; display: none">

 <!-- // code goes here  -->


</svg>
  1. Directement après la déclaration du graphique SVG, j'ai ajouté une nouvelle image. Cette image est l'espace réservé de la nouvelle représentation de l'image PNG pour l'image SVG. Je le cache d'abord pour empêcher l'image de scintiller lors du chargement. La source est initialement non spécifiée:
<img id="graph1_as_png" src="" width="700" height="700" style="display: none">
  1. Après l'image nouvellement ajoutée, j'ai ajouté des lignes de code, qu'au tour de la conversion:
<script>

    svgAsPngUri(document.getElementById("graph1")).then(uri => {
      $("#graph1_as_png").attr('src', uri).show();
    });

</script>

La source de la deuxième image est remplie d'une version codée de base64 du SVG. Après la conversion, l'image est affichée. Maintenant, nous avons exactement la même image que notre image SVG, mais avec la possibilité de télécharger ou de copier l'image.

J'espère que cela vous aidera comme wel ..

0
eheydenr