ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-01-26 14:19:25 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Fix error when taking PNG screenshots

Browse Source
This commit is contained in:
grossmj 2024-12-23 15:52:17 +07:00
parent 180c65351b
commit b510f3dc8f
No known key found for this signature in database
GPG Key ID: 1E7DD6DBB53FF3D7
2 changed files with 34 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -98,25 +98,42 @@ export class ProjectMapMenuComponent implements OnInit, OnDestroy {
private async saveImage(screenshotProperties: Screenshot) {
if (screenshotProperties.filetype === 'png') {
let splittedSvg = document.getElementsByTagName('svg')[0].outerHTML.split('image');
let i = 1;
try {
// Get the SVG element and clone it to avoid modifying the original
const originalSvg = document.getElementsByTagName('svg')[0];
const svgClone = originalSvg.cloneNode(true) as SVGElement;
while (i < splittedSvg.length) {
let splittedImage = splittedSvg[i].split('"');
let splittedUrl = splittedImage[1].split('/');
let elem = await this.symbolService.raw(this.controller, splittedUrl[7]).toPromise();
let splittedElement = elem.split('-->');
splittedSvg[i] = splittedElement[1].substring(2);
i += 2;
// Process any embedded images
const images = svgClone.getElementsByTagName('image');
for (let i = 0; i < images.length; i++) {
const image = images[i];
const href = image.getAttribute('href') || image.getAttribute('xlink:href');
if (href) {
const urlParts = href.split('/');
const symbolId = urlParts[urlParts.length - 1];
try {
const rawSvg = await this.symbolService.raw(this.controller, symbolId).toPromise();
if (rawSvg) {
// Extract SVG content, fallback to raw content if parsing fails
const svgContent = rawSvg.includes('-->') ?
rawSvg.split('-->')[1].trim() :
rawSvg.trim();
image.outerHTML = svgContent;
}
} catch (err) {
console.warn(`Failed to process embedded image: ${symbolId}`, err);
}
}
}
let svgString = splittedSvg.join();
let placeholder = document.createElement('div');
placeholder.innerHTML = svgString;
let element = placeholder.firstChild;
svg.saveSvgAsPng(element, `${screenshotProperties.name}.png`);
// Create a temporary container and save as PNG
const container = document.createElement('div');
container.appendChild(svgClone);
svg.saveSvgAsPng(svgClone, `${screenshotProperties.name}.png`);
} catch (err) {
console.error('Failed to save PNG:', err);
throw err;
}
} else {
var svg_el = select('svg').attr('version', 1.1).attr('xmlns', 'http://www.w3.org/2000/svg').node();
downloadSvg(select('svg').node(), `${screenshotProperties.name}`);

2
src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.ts
View File

@ -25,7 +25,7 @@ export class ScreenshotDialogComponent implements OnInit {
this.nameForm = this.formBuilder.group({
screenshotName: new UntypedFormControl(`screenshot-${Date.now()}`, [Validators.required]),
});
this.isPngAvailable = this.electronService.isWindows || this.deviceService.getDeviceInfo().os === 'Windows';
this.isPngAvailable = true;
}
ngOnInit() {}