@mptw/skylens-ui 1.4.81 → 1.4.82

package/components/SLDownloadButton.vue

@@ -46,21 +46,7 @@ function safeSheetName(name: string) {
   return name.replace(/[\\/*?:[\]]/g, "").substring(0, 31);
 }
 
-function loadImage(url: string) {
-  return new Promise<HTMLImageElement>((resolve) => {
-    const img = new Image();
-    img.onload = function () {
-      resolve(img);
-    };
-    img.src = url;
-  });
-}
-
-const DEFAULT_STYLE = {
-  marginTop: 0,
-  marginBottom: 9,
-  border: 0,
-};
+const WatermarkImage = '/assets/images/commons/watermark-2.svg';
 
 export default defineComponent({
   name: "SLDownloadButton",
@@ -137,22 +123,6 @@ export default defineComponent({
     let clickSubscriber: Subscription | null = null;
     let popperInstance: PopperInstance | null = null;
 
-    const watermarkImg = computed(() => '/assets/images/commons/watermark-2.svg')
-    const styleOption = computed(() => {
-      return Object.assign({}, DEFAULT_STYLE, customStyle.value);
-    });
-    const filterOption = computed(() => {
-      return (node: HTMLElement) => {
-        return (
-          !(
-            node?.getAttribute && node.getAttribute("data-skip-download") === ""
-          ) &&
-          (typeof customFilter.value !== "function" ||
-            (customFilter.value && customFilter.value(node)))
-        );
-      };
-    });
-
     function subscribeClick() {
       clickSubscriber = fromEvent(window, "click").subscribe((e) => {
         const { target } = e;
@@ -252,10 +222,8 @@ export default defineComponent({
         return;
       }
 
-      if (!imageTarget.value) {
-        console.log("Can not find target of htmlToImage!");
-        return;
-      }
+      const dataURL = await domToPngDataUrl(imageTarget.value, customFilter.value, customStyle.value, padding.value, dateRanges.value, watermark.value, WatermarkImage);
+      downloadURL(dataURL, `${fileName.value}.png`);
 
       if (evCategory.value !== "") {
         gaev({
@@ -269,93 +237,6 @@ export default defineComponent({
           label: "下載圖片",
         });
       }
-
-      const options = {
-        pixelRatio: 1,
-        filter: filterOption.value,
-        style: styleOption.value,
-      };
-
-      let dataURL = await htmlToImage.toPng(imageTarget.value, options);
-      if (padding.value) dataURL = await addPadding(dataURL, padding.value);
-      if (dateRanges.value?.length > 0)
-        dataURL = await addDateRanges(dataURL, [...dateRanges.value].reverse());
-      if (watermark.value) dataURL = await addWatermark(dataURL, watermarkImg.value);
-      downloadURL(dataURL, `${fileName.value}.png`);
-    }
-
-    async function addPadding(dataURL: string, padding: number) {
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return "";
-
-      const img = await loadImage(dataURL);
-      const { width, height } = img;
-      canvas.width = width + padding * 2;
-      canvas.height = height + padding * 2;
-      ctx.fillStyle = "#FFFFFF";
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-      ctx.drawImage(img, padding, padding);
-
-      return canvas.toDataURL();
-    }
-
-    async function addDateRanges(
-      dataURL: string,
-      dateRanges: (IDateRange | null)[]
-    ) {
-      const fontSize = 16;
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return "";
-
-      const img = await loadImage(dataURL);
-      const { width, height } = img;
-      canvas.width = width;
-      canvas.height = height + fontSize * 3;
-      ctx.fillStyle = "#FFFFFF";
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-      ctx.drawImage(img, 0, 0);
-
-      const text = `時間區間：${dateRanges
-        .filter((dateRange) => !!dateRange)
-        .map((dateRange) => formatDateRange(dateRange))
-        .join(" v.s. ")}`;
-      ctx.fillStyle = "#333333";
-      ctx.font = `${fontSize}px "Microsoft JhengHei"`;
-      ctx.fillText(text, fontSize, canvas.height - fontSize);
-
-      return canvas.toDataURL();
-    }
-
-    async function addWatermark(dataURL: string, watermarkImg: any) {
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return "";
-
-      const img = await loadImage(dataURL);
-      const watermark = await loadImage(watermarkImg);
-
-      const { width, height } = img;
-      canvas.width = width;
-      canvas.height = height;
-
-      ctx.fillStyle = "#FFFFFF";
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-      ctx.drawImage(img, 0, 0);
-
-      // const matrix = new DOMMatrix();
-      // const pattern = ctx.createPattern(watermark, "repeat");
-      // if (!pattern) return "";
-
-      // pattern.setTransform(matrix.rotate(-20).scale(0.5));
-      // ctx.globalAlpha = 0.05;
-      // ctx.fillStyle = pattern;
-      // ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-      ctx.drawImage(watermark, canvas.width - watermark.width - 12, canvas.height - watermark.height - 12);
-
-      return canvas.toDataURL();
     }
 
     onMounted(() => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mptw/skylens-ui",
   "type": "module",
-  "version": "1.4.81",
+  "version": "1.4.82",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",

package/utils/index.ts

@@ -21,6 +21,7 @@ import type IDateRange from '~ui/interface/IDateRange';
 import { ScreenSize } from '~ui/interface/commons';
 import ExcelJS from 'exceljs';
 import { useGtm } from '@gtm-support/vue-gtm';
+import * as htmlToImage from "html-to-image";
 
 export const getUID = () => {
   return `uid-${Math.random().toString(36).substring(2)}`;
@@ -574,4 +575,131 @@ export const waitFor = async (condition: () => boolean, pollInterval = 50, timeo
 
     await new Promise(r => setTimeout(r, pollInterval));
   }
+}
+
+function loadImage(url: string) {
+  return new Promise<HTMLImageElement>((resolve) => {
+    const img = new Image();
+    img.onload = function () {
+      resolve(img);
+    };
+    img.src = url;
+  });
+}
+
+async function addPadding(dataURL: string, padding: number) {
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return "";
+
+  const img = await loadImage(dataURL);
+  const { width, height } = img;
+  canvas.width = width + padding * 2;
+  canvas.height = height + padding * 2;
+  ctx.fillStyle = "#FFFFFF";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.drawImage(img, padding, padding);
+
+  return canvas.toDataURL();
+}
+
+async function addDateRanges(
+  dataURL: string,
+  dateRanges: (IDateRange | null)[]
+) {
+  const fontSize = 16;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return "";
+
+  const img = await loadImage(dataURL);
+  const { width, height } = img;
+  canvas.width = width;
+  canvas.height = height + fontSize * 3;
+  ctx.fillStyle = "#FFFFFF";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.drawImage(img, 0, 0);
+
+  const text = `時間區間：${dateRanges
+    .filter((dateRange) => !!dateRange)
+    .map((dateRange) => formatDateRange(dateRange))
+    .join(" v.s. ")}`;
+  ctx.fillStyle = "#333333";
+  ctx.font = `${fontSize}px "Microsoft JhengHei"`;
+  ctx.fillText(text, fontSize, canvas.height - fontSize);
+
+  return canvas.toDataURL();
+}
+
+async function addWatermark(dataURL: string, watermarkImg: string) {
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return "";
+
+  const img = await loadImage(dataURL);
+  const watermark = await loadImage(watermarkImg);
+
+  const { width, height } = img;
+  canvas.width = width;
+  canvas.height = height;
+
+  ctx.fillStyle = "#FFFFFF";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.drawImage(img, 0, 0);
+
+  // const matrix = new DOMMatrix();
+  // const pattern = ctx.createPattern(watermark, "repeat");
+  // if (!pattern) return "";
+
+  // pattern.setTransform(matrix.rotate(-20).scale(0.5));
+  // ctx.globalAlpha = 0.05;
+  // ctx.fillStyle = pattern;
+  // ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+  ctx.drawImage(watermark, canvas.width - watermark.width - 12, canvas.height - watermark.height - 12);
+
+  return canvas.toDataURL();
+}
+
+export const domToPngDataUrl = async (
+  imageTarget: HTMLElement | null,
+  customFilter: Function | null,
+  customStyle: CSSStyleDeclaration | null,
+  padding: number = 0,
+  dateRanges: (IDateRange | null)[] = [],
+  watermark: boolean = true,
+  watermarkImg: string = '/assets/images/commons/watermark-2.svg',
+) => {
+  if (!imageTarget) {
+    console.log("Can not find target of htmlToImage!");
+    return;
+  }
+
+  const filterOption = (node: HTMLElement) => {
+    return (
+      !(
+        node?.getAttribute && node.getAttribute("data-skip-download") === ""
+      ) &&
+      (typeof customFilter !== "function" ||
+        (customFilter && customFilter(node)))
+    );
+  };
+  const styleOption = Object.assign({}, {
+    marginTop: '0px',
+    marginBottom: '9px',
+    border: 'none',
+  }, customStyle || {});
+
+  const options = {
+    pixelRatio: 1,
+    filter: filterOption,
+    style: styleOption,
+  };
+
+  let dataURL = await htmlToImage.toPng(imageTarget, options);
+  if (padding) dataURL = await addPadding(dataURL, padding);
+  if (dateRanges?.length)
+    dataURL = await addDateRanges(dataURL, [...dateRanges].reverse());
+  if (watermark) dataURL = await addWatermark(dataURL, watermarkImg);
+  return dataURL;
 }