vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-25 23:54:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix export to images

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2022-02-13 08:40:49 -08:00
parent b076f482f1
commit e331ba77b9
2 changed files with 28 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
packages/mindplot/src/components/export/BinaryImageExporter.ts
View File

@ -43,37 +43,38 @@ class BinaryImageExporter extends Exporter {
throw new Error('Images can not be exporeted'); throw new Error('Images can not be exporeted');
} }
async exportAndEndcode(): Promise<string> { exportAndEncode(): Promise<string> {
const svgExporter = new SVGExporter(this.svgElement); const svgExporter = new SVGExporter(this.svgElement);
const svgUrl = await svgExporter.exportAndEncode(); const svgUrl = svgExporter.exportAndEncode();
return svgUrl.then((value: string) => {
// Get the device pixel ratio, falling back to 1. But, I will double the resolution to look nicer.
const dpr = (window.devicePixelRatio || 1) * 2;
// Get the device pixel ratio, falling back to 1. But, I will double the resolution to look nicer. // Create canvas ...
const dpr = (window.devicePixelRatio || 1) * 2; const canvas = document.createElement('canvas');
canvas.setAttribute('width', (this.width * dpr).toString());
canvas.setAttribute('height', (this.height * dpr).toString());
// Create canvas ... // Render the image and wait for the response ...
const canvas = document.createElement('canvas'); const img = new Image();
canvas.setAttribute('width', (this.width * dpr).toString()); const result = new Promise<string>((resolve) => {
canvas.setAttribute('height', (this.height * dpr).toString()); img.onload = () => {
const ctx = canvas.getContext('2d');
// Scale for retina ...
ctx.scale(dpr, dpr);
ctx.drawImage(img, 0, 0);
// Render the image and wait for the response ... const imgDataUri = canvas
const img = new Image(); .toDataURL(this.getContentType())
const result = new Promise<string>((resolve) => { .replace('image/png', 'octet/stream');
img.onload = () => {
const ctx = canvas.getContext('2d');
// Scale for retina ...
ctx.scale(dpr, dpr);
ctx.drawImage(img, 0, 0);
const imgDataUri = canvas URL.revokeObjectURL(value);
.toDataURL(this.getContentType()) resolve(imgDataUri);
.replace('image/png', 'octet/stream'); };
});
URL.revokeObjectURL(svgUrl); img.src = value;
resolve(imgDataUri); return result;
};
}); });
img.src = svgUrl;
return result;
} }
} }
export default BinaryImageExporter; export default BinaryImageExporter;

3
packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx
View File

@ -15,6 +15,7 @@ import Client from '../../../../classes/client';
import { activeInstance } from '../../../../redux/clientSlice'; import { activeInstance } from '../../../../redux/clientSlice';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import SizeType from '@wisemapping/mindplot/src/components/SizeType';
type ExportFormat = 'svg' | 'jpg' | 'png' | 'txt' | 'mm' | 'wxml' | 'xls' | 'md'; type ExportFormat = 'svg' | 'jpg' | 'png' | 'txt' | 'mm' | 'wxml' | 'xls' | 'md';
type ExportGroup = 'image' | 'document' | 'mindmap-tool'; type ExportGroup = 'image' | 'document' | 'mindmap-tool';
@ -77,7 +78,7 @@ const ExportDialog = ({
const exporter = (formatType: ExportFormat): Promise<string> => { const exporter = (formatType: ExportFormat): Promise<string> => {
let svgElement: Element | null = null; let svgElement: Element | null = null;
let size; let size: SizeType;
let mindmap: Mindmap; let mindmap: Mindmap;
const designer: Designer = global.designer; const designer: Designer = global.designer;