vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-09-21 11:40:07 +02:00
Code Issues Packages Projects Releases Wiki Activity

Restrict image export size.

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2022-02-15 14:40:51 -08:00
parent 6ecfa0139b
commit 925ab9e3c2
3 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,16 +15,15 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Mindmap } from '../..';
import Exporter from './Exporter';
import SVGExporter from './SVGExporter';
/**
* Based on https://mybyways.com/blog/convert-svg-to-png-using-your-browser
*/
class BinaryImageExporter extends Exporter {
private svgElement: Element;
private static maxAllowedSize = 10000;
private mindmap: Mindmap;
private svgElement: Element;
private width: number;
@ -32,10 +31,9 @@ class BinaryImageExporter extends Exporter {
private adjustToFit: boolean;
constructor(mindmap: Mindmap, svgElement: Element, width: number, height: number, imgFormat: 'image/png' | 'image/jpeg', adjustToFit = true) {
constructor(svgElement: Element, width: number, height: number, imgFormat: 'image/png' | 'image/jpeg', adjustToFit = true) {
super(imgFormat.split('/')[0], imgFormat);
this.svgElement = svgElement;
this.mindmap = mindmap;
this.adjustToFit = adjustToFit;
this.width = width;
this.height = height;
@ -66,6 +64,14 @@ class BinaryImageExporter extends Exporter {
width = (this.width * dpr);
height = (this.height * dpr);
}
// Prevents an image too big. Failures seen during export in couple of browsers
if (Math.max(width, height) > BinaryImageExporter.maxAllowedSize) {
const scale = Math.max(width, height) / BinaryImageExporter.maxAllowedSize;
width /= scale;
height /= scale;
}
canvas.setAttribute('width', width.toFixed(0));
canvas.setAttribute('height', height.toFixed(0));

7
packages/mindplot/src/components/export/ImageExporterFactory.ts
View File

@ -15,14 +15,13 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Mindmap } from '../..';
import BinaryImageExporter from './BinaryImageExporter';
import Exporter from './Exporter';
import SVGExporter from './SVGExporter';
type imageType = 'svg' | 'png' | 'jpg';
class ImageExpoterFactory {
static create(type: imageType, mindmap: Mindmap, svgElement: Element, width: number, height: number, adjustToFit = true): Exporter {
static create(type: imageType, svgElement: Element, width: number, height: number, adjustToFit = true): Exporter {
let result: Exporter;
switch (type) {
case 'svg': {
@ -30,11 +29,11 @@ class ImageExpoterFactory {
break;
}
case 'png': {
result = new BinaryImageExporter(mindmap, svgElement, width, height, 'image/png', adjustToFit);
result = new BinaryImageExporter(svgElement, width, height, 'image/png', adjustToFit);
break;
}
case 'jpg': {
result = new BinaryImageExporter(mindmap, svgElement, width, height, 'image/jpeg', adjustToFit);
result = new BinaryImageExporter(svgElement, width, height, 'image/jpeg', adjustToFit);
break;
}
default:

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

@ -105,7 +105,7 @@ const ExportDialog = ({
case 'png':
case 'jpg':
case 'svg': {
exporter = ImageExporterFactory.create(formatType, mindmap, svgElement, size.width, size.height, zoomToFit);
exporter = ImageExporterFactory.create(formatType, svgElement, size.width, size.height, zoomToFit);
break;
}
case 'wxml':