feat: implemented utility function to copy an HTML element as an image to the clipboard

lib/utils/copy-to-clipboard.test.ts

@@ -0,0 +1,68 @@
+import { copyNodeAsImage } from "./copy-to-clipboard";
+
+if (typeof ClipboardItem === "undefined") {
+  globalThis.ClipboardItem = class ClipboardItem {
+    types: string[];
+
+    constructor(public items: Record<string, string | Blob | PromiseLike<string | Blob>>) {
+      this.types = Object.keys(items);
+    }
+
+    async getType(type: string): Promise<Blob> {
+      const item = this.items[type];
+      if (item instanceof Blob) {
+        return item;
+      } else if (typeof item === "string") {
+        return new Blob([item]);
+      } else if (item instanceof Promise) {
+        const resolvedItem = await item;
+        return resolvedItem instanceof Blob ? resolvedItem : new Blob([String(resolvedItem)]);
+      }
+      throw new Error(`No item for type: ${type}`);
+    }
+  } as unknown as typeof ClipboardItem;
+}
+
+describe("copyNodeAsImage", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("should copy node as image to clipboard when node is valid", async () => {
+    document.body.innerHTML = '<div id="test-node">hello</div>';
+    const node = document.getElementById("test-node");
+
+    const mockWrite = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, "clipboard", {
+      value: {
+        write: mockWrite,
+        read: vi.fn().mockResolvedValue([
+          new ClipboardItem({
+            "image/png": new Blob(["mock image data"], { type: "image/png" }),
+          }),
+        ]),
+      },
+      writable: true,
+    });
+
+    if (node !== null) {
+      await copyNodeAsImage(node);
+    }
+
+    // Check if clipboard.write was called
+    expect(mockWrite).toHaveBeenCalled();
+
+    // Check if the written data is of the correct type
+    const [writeArg] = mockWrite.mock.calls[0][0];
+    expect(writeArg).toBeInstanceOf(ClipboardItem);
+    expect(writeArg.types).toContain("image/png");
+  });
+
+  it("should throw error when node is null", async () => {
+    await expect(copyNodeAsImage(null)).rejects.toThrow("Failed to copy image to clipboard");
+  });
+});

lib/utils/copy-to-clipboard.ts

@@ -1,3 +1,4 @@
+import html2canvas from "html2canvas";
 import { shortenUrl } from "./shorten-url";
 
 export const copyToClipboard = async (content: string) => {
@@ -9,3 +10,33 @@ export const copyToClipboard = async (content: string) => {
     console.log("This browser does not support the clipboard.", error);
   }
 };
+
+/**
+ * Copies the content of an HTML element as an image to the clipboard.
+ *
+ * @param node The HTML element to copy as an image.
+ *
+ * @returns A promise that resolves when the image has been copied to the clipboard.
+ */
+export async function copyNodeAsImage(node: HTMLElement | null) {
+  if (!node) {
+    throw new Error("Failed to copy image to clipboard");
+  }
+
+  await navigator.clipboard.write([
+    new ClipboardItem({
+      "image/png": new Promise(async (resolve, reject) => {
+        html2canvas(node).then((canvas) => {
+          canvas.toBlob((blob) => {
+            if (!blob) {
+              reject("Failed to copy image to clipboard");
+              return;
+            }
+
+            resolve(new Blob([blob], { type: "image/png" }));
+          }, "image/png");
+        });
+      }),
+    }),
+  ]);
+}

package.json

@@ -89,6 +89,7 @@
     "echarts": "^5.4.1",
     "echarts-for-react": "^3.0.2",
     "embla-carousel-react": "^8.1.3",
+    "html2canvas": "^1.4.1",
     "next": "^14.1.4",
     "nextjs-progressbar": "^0.0.16",
     "octokit": "^3.1.2",