diff --git a/packages/mindplot/src/components/export/BinaryImageExporter.ts b/packages/mindplot/src/components/export/BinaryImageExporter.ts index 5285c786..ad93411b 100644 --- a/packages/mindplot/src/components/export/BinaryImageExporter.ts +++ b/packages/mindplot/src/components/export/BinaryImageExporter.ts @@ -43,37 +43,38 @@ class BinaryImageExporter extends Exporter { throw new Error('Images can not be exporeted'); } - async exportAndEndcode(): Promise { + exportAndEncode(): Promise { 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. - const dpr = (window.devicePixelRatio || 1) * 2; + // Create canvas ... + const canvas = document.createElement('canvas'); + canvas.setAttribute('width', (this.width * dpr).toString()); + canvas.setAttribute('height', (this.height * dpr).toString()); - // Create canvas ... - const canvas = document.createElement('canvas'); - canvas.setAttribute('width', (this.width * dpr).toString()); - canvas.setAttribute('height', (this.height * dpr).toString()); + // Render the image and wait for the response ... + const img = new Image(); + const result = new Promise((resolve) => { + 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 img = new Image(); - const result = new Promise((resolve) => { - img.onload = () => { - const ctx = canvas.getContext('2d'); - // Scale for retina ... - ctx.scale(dpr, dpr); - ctx.drawImage(img, 0, 0); + const imgDataUri = canvas + .toDataURL(this.getContentType()) + .replace('image/png', 'octet/stream'); - const imgDataUri = canvas - .toDataURL(this.getContentType()) - .replace('image/png', 'octet/stream'); - - URL.revokeObjectURL(svgUrl); - resolve(imgDataUri); - }; + URL.revokeObjectURL(value); + resolve(imgDataUri); + }; + }); + img.src = value; + return result; }); - img.src = svgUrl; - return result; } } export default BinaryImageExporter; diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx index be4ec8a5..7ad3d011 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx +++ b/packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx @@ -15,6 +15,7 @@ import Client from '../../../../classes/client'; import { activeInstance } from '../../../../redux/clientSlice'; import { useSelector } from 'react-redux'; +import SizeType from '@wisemapping/mindplot/src/components/SizeType'; type ExportFormat = 'svg' | 'jpg' | 'png' | 'txt' | 'mm' | 'wxml' | 'xls' | 'md'; type ExportGroup = 'image' | 'document' | 'mindmap-tool'; @@ -77,7 +78,7 @@ const ExportDialog = ({ const exporter = (formatType: ExportFormat): Promise => { let svgElement: Element | null = null; - let size; + let size: SizeType; let mindmap: Mindmap; const designer: Designer = global.designer;