feat: support export png (screenshot)

Author: pionxzh

packages/userscript/package.json

@@ -16,6 +16,7 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
+    "html2canvas": "^1.4.1",
     "vite-plugin-monkey": "^2.7.3"
   },
   "devDependencies": {

packages/userscript/src/icons.ts

@@ -4,12 +4,15 @@ export const fileLines = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3
 // source: fontawesome: file-code
 export const fileCode = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="w-4 h-4" fill="currentColor"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM153 289l-31 31 31 31c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L71 337c-9.4-9.4-9.4-24.6 0-33.9l48-48c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9zM265 255l48 48c9.4 9.4 9.4 24.6 0 33.9l-48 48c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l31-31-31-31c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0z"/></svg>'
 
+// source: fontawesome: file-image
+export const iconCamera = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4" fill="currentColor"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M149.1 64.8L138.7 96H64C28.7 96 0 124.7 0 160V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H373.3L362.9 64.8C356.4 45.2 338.1 32 317.4 32H194.6c-20.7 0-39 13.2-45.5 32.8zM256 384c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96z"/></svg>'
+
 // source: ChatGPT generated
-export const fileGif = `
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="w-4 h-4" fill="currentColor">
-    <rect x="10" y="10" width="80" height="80" fill="#EFEFEF" />
-    <text x="50" y="60" font-size="40" text-anchor="middle">GIF</text>
-</svg>`
+// export const fileGif = `
+// <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="w-4 h-4" fill="currentColor">
+//     <rect x="10" y="10" width="80" height="80" fill="#EFEFEF" />
+//     <text x="50" y="60" font-size="40" text-anchor="middle">GIF</text>
+// </svg>`
 
 // source: fontawesome: copy
 export const iconCopy = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4" fill="currentColor"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M502.6 70.63l-61.25-61.25C435.4 3.371 427.2 0 418.7 0H255.1c-35.35 0-64 28.66-64 64l.0195 256C192 355.4 220.7 384 256 384h192c35.2 0 64-28.8 64-64V93.25C512 84.77 508.6 76.63 502.6 70.63zM464 320c0 8.836-7.164 16-16 16H255.1c-8.838 0-16-7.164-16-16L239.1 64.13c0-8.836 7.164-16 16-16h128L384 96c0 17.67 14.33 32 32 32h47.1V320zM272 448c0 8.836-7.164 16-16 16H63.1c-8.838 0-16-7.164-16-16L47.98 192.1c0-8.836 7.164-16 16-16H160V128H63.99c-35.35 0-64 28.65-64 64l.0098 256C.002 483.3 28.66 512 64 512h192c35.2 0 64-28.8 64-64v-32h-47.1L272 448z"/></svg>'

packages/userscript/src/main.ts

@@ -1,6 +1,7 @@
-import { chatGPTAvatarSVG, fileCode, iconCopy } from './icons'
+import html2canvas from 'html2canvas'
+import { chatGPTAvatarSVG, fileCode, iconCamera, iconCopy } from './icons'
 import './style.scss'
-import { copyToClipboard, downloadFile, getBase64FromImg, onloadSafe } from './utils'
+import { copyToClipboard, downloadFile, downloadUrl, getBase64FromImg, onloadSafe, sleep } from './utils'
 import templateHtml from './template.html?raw'
 
 type ConversationLine = |
@@ -56,9 +57,15 @@ function main() {
         })
         container.appendChild(copyButton)
 
+        const imageButton = <HTMLAnchorElement>firstItem.cloneNode(true)
+        imageButton.removeAttribute('href')
+        imageButton.innerHTML = `${iconCamera}Screenshot`
+        imageButton.addEventListener('click', () => exportToPng())
+        container.appendChild(imageButton)
+
         const htmlButton = <HTMLAnchorElement>firstItem.cloneNode(true)
         htmlButton.removeAttribute('href')
-        htmlButton.innerHTML = `${fileCode}Export to .html`
+        htmlButton.innerHTML = `${fileCode}Export WebPage`
         htmlButton.addEventListener('click', () => exportToHtml())
         container.appendChild(htmlButton)
     })
@@ -120,6 +127,56 @@ ${linesHtml}
     downloadFile(fileName, 'text/html', html)
 }
 
+async function exportToPng() {
+    const thread = document.querySelector('[class^="ThreadLayout__NodeWrapper"]') as HTMLElement
+    if (!thread) return
+
+    // hide irrelevant elements
+    thread.style.height = 'auto'
+
+    const alertWrapper = document.querySelector('[class^="_app__AlertWrapper"]')
+    if (alertWrapper) alertWrapper.remove()
+
+    const positionForm = document.querySelector('[class^="Thread__PositionForm"]') as HTMLElement
+    if (positionForm) positionForm.style.display = 'none'
+
+    const bottomSpacer = document.querySelector('[class^="ThreadLayout__BottomSpacer"]') as HTMLElement
+    if (bottomSpacer) bottomSpacer.style.display = 'none'
+
+    const threadWrapper = document.querySelector('[class^="Thread__Wrapper"]')
+    if (threadWrapper && threadWrapper.children.length > 1) {
+        const leftSidebar = threadWrapper.children[1] as HTMLElement
+        const mainContent = threadWrapper.children[0] as HTMLElement
+        leftSidebar.style.display = 'none'
+        mainContent.style.paddingLeft = '0'
+    }
+
+    await sleep(100)
+
+    const canvas = await html2canvas(thread, {
+        scrollX: -window.scrollX,
+        scrollY: -window.scrollY,
+        windowWidth: thread.scrollWidth,
+        windowHeight: thread.scrollHeight,
+    })
+
+    // restore the layout
+    if (threadWrapper && threadWrapper.children.length > 1) {
+        const leftSidebar = threadWrapper.children[1] as HTMLElement
+        const mainContent = threadWrapper.children[0] as HTMLElement
+        leftSidebar.style.display = ''
+        mainContent.style.paddingLeft = ''
+    }
+    if (positionForm) positionForm.style.display = ''
+    if (bottomSpacer) bottomSpacer.style.display = ''
+    thread.style.height = ''
+
+    const dataUrl = canvas.toDataURL('image/png', 1)
+        .replace(/^data:image\/[^;]/, 'data:application/octet-stream')
+    const fileName = `ChatGPT-${new Date().toISOString().replace(/:/g, '-').replace(/\..+/, '')}.png`
+    downloadUrl(fileName, dataUrl)
+}
+
 function getConversation(): ConversationItem[] {
     const thread = document.querySelector('[class^="ThreadLayout__NodeWrapper"]')
     if (!thread) return []

packages/userscript/src/utils.ts

@@ -33,6 +33,15 @@ export function downloadFile(filename: string, type: string, content: string) {
     document.body.removeChild(a)
 }
 
+export function downloadUrl(filename: string, url: string) {
+    const a = document.createElement('a')
+    a.href = url
+    a.download = filename
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+}
+
 export function getBase64FromImg(el: HTMLImageElement) {
     const canvas = document.createElement('canvas')
     canvas.width = el.naturalWidth
@@ -42,3 +51,7 @@ export function getBase64FromImg(el: HTMLImageElement) {
     ctx.drawImage(el, 0, 0)
     return canvas.toDataURL('image/png')
 }
+
+export function sleep(ms: number) {
+    return new Promise(resolve => setTimeout(resolve, ms))
+}