From ad679cd107bead80c865eca74efe232673aa200e Mon Sep 17 00:00:00 2001
From: Pionxzh <spigbbbbb@gmail.com>
Date: Thu, 9 Mar 2023 21:36:27 +0800
Subject: [PATCH] fix: fix wrong dimensions of user pfp in screenshot export

closes #53
---
 packages/userscript/src/exporter/image.ts | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/packages/userscript/src/exporter/image.ts b/packages/userscript/src/exporter/image.ts
index d366d24..e0dd5a6 100644
--- a/packages/userscript/src/exporter/image.ts
+++ b/packages/userscript/src/exporter/image.ts
@@ -28,6 +28,18 @@ export async function exportToPng(fileNameFormat: string) {
     // hide bottom bar
     thread.children[thread.children.length - 1].classList.add('hidden')
 
+    const avatarEls = Array.from(document.querySelectorAll('img[alt]:not([aria-hidden])'))
+    // disabled the avatar srcset
+    // fix https://github.com/pionxzh/chatgpt-exporter/issues/53
+    // seems related to https://github.com/niklasvh/html2canvas/issues/2218
+    avatarEls.forEach((el) => {
+        const srcset = el.getAttribute('srcset')
+        if (srcset) {
+            el.setAttribute('data-srcset', srcset)
+            el.removeAttribute('srcset')
+        }
+    })
+
     await sleep(100)
 
     const canvas = await html2canvas(thread, {
@@ -47,6 +59,15 @@ export async function exportToPng(fileNameFormat: string) {
         }
     })
 
+    // restore the avatar srcset
+    avatarEls.forEach((el) => {
+        const srcset = el.getAttribute('data-srcset')
+        if (srcset) {
+            el.setAttribute('srcset', srcset)
+            el.removeAttribute('data-srcset')
+        }
+    })
+
     const dataUrl = canvas.toDataURL('image/png', 1)
         .replace(/^data:image\/[^;]/, 'data:application/octet-stream')
     const fileName = getFileNameWithFormat(fileNameFormat, 'png')