ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-02-20 17:52:46 +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
Show Stats 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-compat": "^6.5.3",
"save-svg-as-png": "^1.4.14",
"svg-crowbar": "^0.2.3",
"tree-kill": "^1.2.1",
"typeface-roboto": "^0.0.75",
"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"
(drawingSaved)="onDrawingSaved()">
</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 { SymbolService } from '../../../services/symbol.service';
import { select } from 'd3-selection';
import downloadSvg from 'svg-crowbar';
@Component({
@ -38,40 +39,49 @@ export class ProjectMapMenuComponent implements OnInit, OnDestroy {
ngOnInit() {}
public async takeScreenshot() {
let splittedSvg = document.getElementsByTagName("svg")[0].outerHTML.split('image');
let i = 1;
// original, first & second version
// let splittedSvg = document.getElementsByTagName("svg")[0].outerHTML.split('image');
// let i = 1;
while (i < splittedSvg.length) {
let splittedImage = splittedSvg[i].split("\"");
let splittedUrl = splittedImage[1].split("/");
// while (i < splittedSvg.length) {
// let splittedImage = splittedSvg[i].split("\"");
// let splittedUrl = splittedImage[1].split("/");
let elem = await this.symbolService.raw(this.server, splittedUrl[7]).toPromise();
let splittedElement = elem.split('-->');
splittedSvg[i] = splittedElement[1].substring(2);
i += 2;
}
let svgString = splittedSvg.join();
// let elem = await this.symbolService.raw(this.server, splittedUrl[7]).toPromise();
// let splittedElement = elem.split('-->');
// splittedSvg[i] = splittedElement[1].substring(2);
// i += 2;
// }
// let svgString = splittedSvg.join();
let placeholder = document.createElement('div');
placeholder.innerHTML = svgString;
let element = placeholder.firstChild;
// let placeholder = document.createElement('div');
// placeholder.innerHTML = svgString;
// let element = placeholder.firstChild;
// original version
// svg.saveSvgAsPng(element, "screenshot.png");
// first
var canvas = document.createElement('canvas');
canvas.innerHTML = svgString;
canvas.width = 2000;
canvas.height = 1000;
// first version
// var canvas = document.createElement('canvas');
// canvas.innerHTML = svgString;
// canvas.width = 2000;
// canvas.height = 1000;
var a = document.createElement('a');
a.download = "image.png";
a.href = canvas.toDataURL('image/png');
document.body.appendChild(a);
a.click();
// var a = document.createElement('a');
// a.download = "image.png";
// a.href = canvas.toDataURL('image/png');
// document.body.appendChild(a);
// a.click();
// second
// second version
// 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) {

5
yarn.lock
View File

@ -8256,6 +8256,11 @@ supports-color@^6.1.0:
dependencies:
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:
version "1.2.0"
resolved "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"