migrate frontend

web/src/labs/html2image/index.ts

@@ -0,0 +1,142 @@
+/**
+ * HTML to Image
+ *
+ * References:
+ * 1. html-to-image: https://github.com/bubkoo/html-to-image
+ * 2. <foreignObject>: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject
+ */
+import convertResourceToDataURL from "./convertResourceToDataURL";
+import getCloneStyledElement from "./getCloneStyledElement";
+
+type Options = Partial<{
+  backgroundColor: string;
+  pixelRatio: number;
+}>;
+
+function getElementSize(element: HTMLElement) {
+  const { width, height } = window.getComputedStyle(element);
+
+  return {
+    width: parseInt(width.replace("px", "")),
+    height: parseInt(height.replace("px", "")),
+  };
+}
+
+function convertSVGToDataURL(svg: SVGElement): string {
+  const xml = new XMLSerializer().serializeToString(svg);
+  const url = encodeURIComponent(xml);
+  return `data:image/svg+xml;charset=utf-8,${url}`;
+}
+
+function generateSVGElement(width: number, height: number, element: HTMLElement): SVGSVGElement {
+  const xmlns = "http://www.w3.org/2000/svg";
+  const svg = document.createElementNS(xmlns, "svg");
+
+  svg.setAttribute("width", `${width}`);
+  svg.setAttribute("height", `${height}`);
+  svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+
+  const foreignObject = document.createElementNS(xmlns, "foreignObject");
+
+  foreignObject.setAttribute("width", "100%");
+  foreignObject.setAttribute("height", "100%");
+  foreignObject.setAttribute("x", "0");
+  foreignObject.setAttribute("y", "0");
+  foreignObject.setAttribute("externalResourcesRequired", "true");
+
+  foreignObject.appendChild(element);
+  svg.appendChild(foreignObject);
+
+  return svg;
+}
+
+// TODO need rethink how to get the needed font-family
+async function getFontsStyleElement() {
+  const styleElement = document.createElement("style");
+
+  const fonts = [
+    {
+      name: "DINPro",
+      url: "/fonts/DINPro-Regular.otf",
+      weight: "normal",
+    },
+    {
+      name: "DINPro",
+      url: "/fonts/DINPro-Bold.otf",
+      weight: "bold",
+    },
+    {
+      name: "ubuntu-mono",
+      url: "/fonts/UbuntuMono.ttf",
+      weight: "normal",
+    },
+  ];
+
+  for (const f of fonts) {
+    const base64Url = await convertResourceToDataURL(f.url);
+    styleElement.innerHTML += `
+      @font-face {
+        font-family: "${f.name}";
+        src: url("${base64Url}");
+        font-weight: ${f.weight};
+      }`;
+  }
+
+  return styleElement;
+}
+
+export async function toSVG(element: HTMLElement, options?: Options) {
+  const { width, height } = getElementSize(element);
+
+  const clonedElement = await getCloneStyledElement(element);
+
+  if (options?.backgroundColor) {
+    clonedElement.style.backgroundColor = options.backgroundColor;
+  }
+
+  const svg = generateSVGElement(width, height, clonedElement);
+  svg.prepend(await getFontsStyleElement());
+
+  const url = convertSVGToDataURL(svg);
+
+  return url;
+}
+
+export async function toCanvas(element: HTMLElement, options?: Options): Promise<HTMLCanvasElement> {
+  const url = await toSVG(element, options);
+
+  const imageEl = new Image();
+  imageEl.src = url;
+
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d")!;
+  const ratio = options?.pixelRatio || 1;
+  const { width, height } = getElementSize(element);
+
+  canvas.width = width * ratio;
+  canvas.height = height * ratio;
+
+  canvas.style.width = `${width}`;
+  canvas.style.height = `${height}`;
+
+  if (options?.backgroundColor) {
+    context.fillStyle = options.backgroundColor;
+    context.fillRect(0, 0, canvas.width, canvas.height);
+  }
+
+  return new Promise((resolve) => {
+    imageEl.onload = () => {
+      context.drawImage(imageEl, 0, 0, canvas.width, canvas.height);
+
+      resolve(canvas);
+    };
+  });
+}
+
+async function toImage(element: HTMLElement, options?: Options) {
+  const canvas = await toCanvas(element, options);
+
+  return canvas.toDataURL();
+}
+
+export default toImage;