fix: export images with webhook icon

deps: drop canvg

Closes #4127

client/package.json

@@ -38,7 +38,6 @@
     "camunda-cmmn-moddle": "^1.0.0",
     "camunda-dmn-js": "^2.9.1",
     "camunda-dmn-moddle": "^1.3.0",
-    "canvg": "^4.0.2",
     "classnames": "^2.5.1",
     "cmmn-js": "^0.20.0",
     "cmmn-js-properties-panel": "^0.9.0",

client/src/app/util/generateImage.js

@@ -8,57 +8,63 @@
  * except in compliance with the MIT License.
  */
 
-import { Canvg } from 'canvg';
-
 // list of defined encodings
 const ENCODINGS = [
   'image/png',
   'image/jpeg'
 ];
 
-const INITIAL_SCALE = 3;
-const FINAL_SCALE = 1;
-const SCALE_STEP = 1;
-
-const DATA_URL_REGEX = /^data:((?:\w+\/(?:(?!;).)+)?)((?:;[\w\W]*?[^;])*),(.+)$/;
-
-
 export default async function generateImage(type, svg) {
   const encoding = 'image/' + type;
 
   if (ENCODINGS.indexOf(encoding) === -1) {
     throw new Error('<' + type + '> is an unknown type for converting svg to image');
   }
 
-  const initialSVG = svg;
-
-  let dataURL = '';
-
-  for (let scale = INITIAL_SCALE; scale >= FINAL_SCALE; scale -= SCALE_STEP) {
+  const dataUrl = asDataURL(svg);
+  const image = await loadImage(dataUrl);
+  const {
+    height,
+    width
+  } = getSize(svg);
 
-    let canvas = document.createElement('canvas');
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
 
-    svg = initialSVG.replace(/width="([^"]+)" height="([^"]+)"/, function(_, widthStr, heightStr) {
-      return `width="${parseInt(widthStr, 10) * scale}" height="${parseInt(heightStr, 10) * scale}"`;
-    });
+  const context = canvas.getContext('2d');
+  context.drawImage(image, 0, 0, width, height);
 
-    const context = canvas.getContext('2d');
+  // make the background white for every format
+  context.globalCompositeOperation = 'destination-over';
+  context.fillStyle = 'white';
+  context.fillRect(0, 0, canvas.width, canvas.height);
 
-    const canvg = Canvg.fromString(context, svg);
-    await canvg.render();
-
-    // make the background white for every format
-    context.globalCompositeOperation = 'destination-over';
-    context.fillStyle = 'white';
+  return canvas.toDataURL(encoding, 1.0);
+}
 
-    context.fillRect(0, 0, canvas.width, canvas.height);
+function asDataURL(svg) {
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+}
 
-    dataURL = canvas.toDataURL(encoding);
+async function loadImage(url) {
+  const img = new Image();
+  img.src = url;
+  return new Promise((resolve, reject) => {
+    img.onload = () => resolve(img);
+    img.onerror = () => {
+      const error = new Error('Error happened generating image.');
+
+      reject(error);
+    };
+    img.src = url;
+  });
+}
 
-    if (DATA_URL_REGEX.test(dataURL)) {
-      return dataURL;
-    }
-  }
+function getSize(svg) {
+  const match = /width="(?<width>[^"]+)" height="(?<height>[^"]+)"/.exec(svg);
+  const width = parseInt(match.groups.width, 10),
+        height = parseInt(match.groups.height, 10);
 
-  throw new Error('Error happened generating image. Diagram size is too big.');
+  return { width, height };
 }