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 * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import { Mindmap } from '../..';
import Exporter from './Exporter'; import Exporter from './Exporter';
import SVGExporter from './SVGExporter'; import SVGExporter from './SVGExporter';
/** /**
* Based on https://mybyways.com/blog/convert-svg-to-png-using-your-browser * Based on https://mybyways.com/blog/convert-svg-to-png-using-your-browser
*/ */
class BinaryImageExporter extends Exporter { class BinaryImageExporter extends Exporter {
private svgElement: Element; private static maxAllowedSize = 10000;
private mindmap: Mindmap; private svgElement: Element;
private width: number; private width: number;
@ -32,10 +31,9 @@ class BinaryImageExporter extends Exporter {
private adjustToFit: boolean; 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); super(imgFormat.split('/')[0], imgFormat);
this.svgElement = svgElement; this.svgElement = svgElement;
this.mindmap = mindmap;
this.adjustToFit = adjustToFit; this.adjustToFit = adjustToFit;
this.width = width; this.width = width;
this.height = height; this.height = height;
@ -66,6 +64,14 @@ class BinaryImageExporter extends Exporter {
width = (this.width * dpr); width = (this.width * dpr);
height = (this.height * 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('width', width.toFixed(0));
canvas.setAttribute('height', height.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 * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import { Mindmap } from '../..';
import BinaryImageExporter from './BinaryImageExporter'; import BinaryImageExporter from './BinaryImageExporter';
import Exporter from './Exporter'; import Exporter from './Exporter';
import SVGExporter from './SVGExporter'; import SVGExporter from './SVGExporter';
type imageType = 'svg' | 'png' | 'jpg'; type imageType = 'svg' | 'png' | 'jpg';
class ImageExpoterFactory { 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; let result: Exporter;
switch (type) { switch (type) {
case 'svg': { case 'svg': {
@ -30,11 +29,11 @@ class ImageExpoterFactory {
break; break;
} }
case 'png': { case 'png': {
result = new BinaryImageExporter(mindmap, svgElement, width, height, 'image/png', adjustToFit); result = new BinaryImageExporter(svgElement, width, height, 'image/png', adjustToFit);
break; break;
} }
case 'jpg': { case 'jpg': {
result = new BinaryImageExporter(mindmap, svgElement, width, height, 'image/jpeg', adjustToFit); result = new BinaryImageExporter(svgElement, width, height, 'image/jpeg', adjustToFit);
break; break;
} }
default: 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 'png':
case 'jpg': case 'jpg':
case 'svg': { case 'svg': {
exporter = ImageExporterFactory.create(formatType, mindmap, svgElement, size.width, size.height, zoomToFit); exporter = ImageExporterFactory.create(formatType, svgElement, size.width, size.height, zoomToFit);
break; break;
} }
case 'wxml': case 'wxml':