ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-06-18 14:58:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Solution with svg crowbar library

Browse Source
This commit is contained in:
Piotr Pekala
2019-10-02 06:14:51 -07:00
parent 26fed4cabb
commit c2263336a9
4 changed files with 44 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -69,6 +69,7 @@
"rxjs": "^6.5.3", "rxjs": "^6.5.3",
"rxjs-compat": "^6.5.3", "rxjs-compat": "^6.5.3",
"save-svg-as-png": "^1.4.14", "save-svg-as-png": "^1.4.14",
"svg-crowbar": "^0.2.3",
"tree-kill": "^1.2.1", "tree-kill": "^1.2.1",
"typeface-roboto": "^0.0.75", "typeface-roboto": "^0.0.75",
"xterm": "^3.14.5", "xterm": "^3.14.5",

3
src/app/components/project-map/project-map-menu/project-map-menu.component.html
View File

@ -71,3 +71,6 @@
[selectedDrawing]="selectedDrawing" [selectedDrawing]="selectedDrawing"
(drawingSaved)="onDrawingSaved()"> (drawingSaved)="onDrawingSaved()">
</app-drawing-added> </app-drawing-added>
<div id="crowbar-workspace">
</div>

60
src/app/components/project-map/project-map-menu/project-map-menu.component.ts
View File

@ -8,6 +8,7 @@ import * as svg from 'save-svg-as-png';
import { saveAs } from 'file-saver'; import { saveAs } from 'file-saver';
import { SymbolService } from '../../../services/symbol.service'; import { SymbolService } from '../../../services/symbol.service';
import { select } from 'd3-selection'; import { select } from 'd3-selection';
import downloadSvg from 'svg-crowbar';
@Component({ @Component({
@ -38,40 +39,49 @@ export class ProjectMapMenuComponent implements OnInit, OnDestroy {
ngOnInit() {} ngOnInit() {}
public async takeScreenshot() { public async takeScreenshot() {
let splittedSvg = document.getElementsByTagName("svg")[0].outerHTML.split('image'); // original, first & second version
let i = 1; // let splittedSvg = document.getElementsByTagName("svg")[0].outerHTML.split('image');
// let i = 1;
while (i < splittedSvg.length) { // while (i < splittedSvg.length) {
let splittedImage = splittedSvg[i].split("\""); // let splittedImage = splittedSvg[i].split("\"");
let splittedUrl = splittedImage[1].split("/"); // let splittedUrl = splittedImage[1].split("/");
let elem = await this.symbolService.raw(this.server, splittedUrl[7]).toPromise(); // let elem = await this.symbolService.raw(this.server, splittedUrl[7]).toPromise();
let splittedElement = elem.split('-->'); // let splittedElement = elem.split('-->');
splittedSvg[i] = splittedElement[1].substring(2); // splittedSvg[i] = splittedElement[1].substring(2);
i += 2; // i += 2;
} // }
let svgString = splittedSvg.join(); // let svgString = splittedSvg.join();
let placeholder = document.createElement('div'); // let placeholder = document.createElement('div');
placeholder.innerHTML = svgString; // placeholder.innerHTML = svgString;
let element = placeholder.firstChild; // let element = placeholder.firstChild;
// original version
// svg.saveSvgAsPng(element, "screenshot.png"); // svg.saveSvgAsPng(element, "screenshot.png");
// first // first version
var canvas = document.createElement('canvas'); // var canvas = document.createElement('canvas');
canvas.innerHTML = svgString; // canvas.innerHTML = svgString;
canvas.width = 2000; // canvas.width = 2000;
canvas.height = 1000; // canvas.height = 1000;
var a = document.createElement('a'); // var a = document.createElement('a');
a.download = "image.png"; // a.download = "image.png";
a.href = canvas.toDataURL('image/png'); // a.href = canvas.toDataURL('image/png');
document.body.appendChild(a); // document.body.appendChild(a);
a.click(); // a.click();
// second // second version
// this.svgString2Image( svgString, 2000, 1000, 'png'); // passes Blob and filesize String to the callback // this.svgString2Image( svgString, 2000, 1000, 'png'); // passes Blob and filesize String to the callback
// third version
var svg_el = select("svg")
.attr("version", 1.1)
.attr("xmlns", "http://www.w3.org/2000/svg")
.node();
downloadSvg(select("svg").node(), 'screenshot');
} }
// svgString2Image( svgString, width, height, format) { // svgString2Image( svgString, width, height, format) {

5
yarn.lock
View File

@ -8256,6 +8256,11 @@ supports-color@^6.1.0:
dependencies: dependencies:
has-flag "^3.0.0" has-flag "^3.0.0"
svg-crowbar@^0.2.3:
version "0.2.3"
resolved "https://registry.npmjs.org/svg-crowbar/-/svg-crowbar-0.2.3.tgz#2b68812a1fc118757d80ccf18a41e4cc675cb2dc"
integrity sha512-35CKMmoj3HY/5Q9HU0JJmpY0Oi+YU24mFPbR3piihOeddBabv/Un06KWXcWMiR5kJN2kwogUbmB0hem2vT7GjA==
symbol-observable@1.2.0: symbol-observable@1.2.0:
version "1.2.0" version "1.2.0"
resolved "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" resolved "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"