use html2canvas for maps and usingHtml2Image for other images

Author: atalyaalon

package-lock.json

@@ -37,7 +37,8 @@
     "react-share": "^4.4.0",
     "recharts": "^2.12.6",
     "tinycolor2": "^1.6.0",
-    "typescript": "^4.3.5"
+    "typescript": "^4.3.5",
+    "html-to-image": "v1.11.11"
   },
   "scripts": {
     "start": "react-scripts start",

package.json

@@ -2,7 +2,7 @@ import React, { FC, useState } from 'react';
 import {ColorScheme} from 'style'
 import { Card, CardContent, Box } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-import widgetToImage from 'services/to-image.service';
+import {widgetToImageH2I, widgetToImageH2C} from 'services/to-image.service';
 
 // TEXT BOX COMPONENT ADD FEATURE
 import  TextBox from 'components/organisms/TextBox'
@@ -15,7 +15,7 @@ import TitleIcon from '@material-ui/icons/Title';
 import { fontFamilyString } from 'style';
 import CardHeader from './CardHeader';
 import SocialShare from 'components/atoms/SocialShare';
-import { FooterVariant, getWidgetVariant, HeaderVariant } from 'services/widgets.style.service';
+import { FooterVariant, getWidgetVariant, HeaderVariant, getWidgetType, CardType } from 'services/widgets.style.service';
 import { getSizes } from './card.util';
 import CardFooter from './CardFooter';
 import CardEditor from 'components/organisms/CardEditorDialog';
@@ -103,15 +103,19 @@ const AnyWayCard: FC<IProps> = ({
   const variant = getWidgetVariant(widgetName);
   const factor = getSizeFactor(sizeOptions);
   const sizes = getSizes(variant, factor);
+  const widgetType = getWidgetType(widgetName);
 
   const classes = useStyles();
 
   const imgDownloadHandler = () => {
     if (element && element instanceof HTMLElement) {
-      widgetToImage(widgetName, element);
+      if (widgetType === CardType.Map) {
+        widgetToImageH2C(widgetName, element);
+      } else {
+        widgetToImageH2I(widgetName, element);
+      }
     }
   };
-
 
   let Widget;
 

src/components/molecules/card/AnyWayCard.tsx

@@ -5,7 +5,8 @@ import WidgetWrapper from 'components/molecules/widgets/WidgetWrapper';
 import { Box, Checkbox, FormControlLabel, FormGroup } from '@material-ui/core';
 import AnyWayCard, { CardSizeOptions } from 'components/molecules/card/AnyWayCard';
 import { MetaTag, ErrorBoundary, Typography, Button, Slider } from 'components/atoms';
-import widgetToImage from 'services/to-image.service';
+import { getWidgetType, CardType } from 'services/widgets.style.service';
+import {widgetToImageH2I, widgetToImageH2C} from 'services/to-image.service';
 import { useTranslation } from 'react-i18next';
 import { blueVioletColor } from 'style';
 import { logosSourceMap, OrgLogoData } from 'const/cards.const';
@@ -32,9 +33,14 @@ const CardEditor: FC<IProps> = ({ isOpen, onClose, widgetName, text }) => {
   const getCardRef = (element: HTMLElement) => setCardElement(element);
   const organizationName = userStore.userOrganizations ? userStore.userOrganizations[0] : '';
   const organizationData: OrgLogoData | undefined = logosSourceMap.find((p) => p.key === organizationName);
+  const widgetType = getWidgetType(widgetName);
   const imgDownloadHandler = () => {
     if (cardElement && cardElement instanceof HTMLElement) {
-      widgetToImage(widgetName, cardElement);
+      if (widgetType === CardType.Map) {
+        widgetToImageH2C(widgetName, cardElement);
+      } else {
+        widgetToImageH2I(widgetName, cardElement);
+      }
     }
   };
 

src/components/organisms/CardEditorDialog.tsx

@@ -1,7 +1,8 @@
 import { saveAs } from 'file-saver';
+import * as htmlToImage from 'html-to-image';
 import html2canvas from 'html2canvas';
 
-const DEFAULT_SCALE = 1;
+const DEFAULT_SCALE = 3;
 
 const removeMapControllers = (el: Document) => {
   const elementList = el.querySelectorAll(
@@ -10,7 +11,20 @@ const removeMapControllers = (el: Document) => {
   Array.from(elementList).forEach((el) => el.remove());
 };
 
-const widgetToImage = (fileName: string, widgetElement: HTMLElement, scale = DEFAULT_SCALE) => {
+export const widgetToImageH2I = (fileName: string, widgetElement: HTMLElement) => {
+  usingHtml2Image(fileName, widgetElement);
+};
+
+// https://github.com/bubkoo/html-to-image
+const usingHtml2Image = (fileName: string, widgetElement: HTMLElement) => {
+
+  htmlToImage.toPng(widgetElement)
+  .then(function (blob: any) {
+    saveAs(blob, `${fileName}.png`);
+  });
+};
+
+export const widgetToImageH2C = (fileName: string, widgetElement: HTMLElement, scale = DEFAULT_SCALE) => {
   usingHtml2Canvas(fileName, widgetElement, scale);
 };
 
@@ -31,5 +45,3 @@ const usingHtml2Canvas = (fileName: string, widgetElement: HTMLElement, scale: n
       saveAs(blob, `${fileName}.png`);
     });
 };
-
-export default widgetToImage;

src/services/to-image.service.ts

@@ -14,11 +14,16 @@ export enum FooterVariant {
   LogoWithRange,
 }
 
+export enum CardType {
+  None,
+  Map,
+}
 export interface CardVariant {
   header: HeaderVariant;
   footer: FooterVariant;
 }
 
+
 // === widgets variants === //
 // determine the footer and  header style for each card
 // See `HeaderVariant` and `FooterVariant` enums
@@ -66,3 +71,14 @@ export function getWidgetVariant(widgetName: string) {
   const variant = widgetVariants[widgetName];
   return variant || widgetVariants.defaultVariant;
 }
+
+const widgetTypes: { [index: string]: CardType } = {
+  defaultType: CardType.None,
+  [WidgetName.most_severe_accidents]: CardType.Map ,
+  [WidgetName.accidents_heat_map]:CardType.Map,
+};
+
+export function getWidgetType(widgetName: string) {
+  const widgetType = widgetTypes[widgetName];
+  return widgetType || widgetTypes.defaultType;
+}