examples: add screenshot example (#1456)

examples/vite/package.json

@@ -14,6 +14,7 @@
     "@vue-flow/minimap": "workspace:*",
     "@vue-flow/node-resizer": "workspace:*",
     "@vue-flow/node-toolbar": "workspace:*",
+    "html-to-image": "^1.11.11",
     "pinia": "^2.1.7"
   },
   "devDependencies": {

examples/vite/router.ts

@@ -126,6 +126,10 @@ export const routes: RouterOptions['routes'] = [
     path: '/pinia',
     component: () => import('./src/Pinia/PiniaExample.vue'),
   },
+  {
+    path: '/screenshot',
+    component: () => import('./src/Screenshot/ScreenshotExample.vue'),
+  },
 ]
 
 export const router = createRouter({

examples/vite/src/Screenshot/ScreenshotExample.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
+import type { Edge, Node } from '@vue-flow/core'
+import { useScreenshot } from './useScreenshot'
+
+const { vueFlowRef } = useVueFlow()
+const { capture } = useScreenshot()
+
+const nodes = ref<Node[]>([
+  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
+  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
+  { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
+])
+
+const edges = ref<Edge[]>([
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3' },
+])
+
+function doScreenshot() {
+  if (!vueFlowRef.value) {
+    console.warn('VueFlow element not found')
+    return
+  }
+
+  capture(vueFlowRef.value, { shouldDownload: true })
+}
+</script>
+
+<template>
+  <VueFlow :nodes="nodes" :edges="edges" fit-view-on-init style="background: white">
+    <Panel position="top-center">
+      <button @click="doScreenshot">Screenshot</button>
+    </Panel>
+  </VueFlow>
+</template>

examples/vite/src/Screenshot/types.ts

@@ -0,0 +1,23 @@
+import type { Options as HTMLToImageOptions } from 'html-to-image/es/types'
+import type { Ref } from 'vue'
+
+export type ImageType = 'jpeg' | 'png'
+
+export interface UseScreenshotOptions extends HTMLToImageOptions {
+  type?: ImageType
+  fileName?: string
+  shouldDownload?: boolean
+  fetchRequestInit?: RequestInit
+}
+
+export type CaptureScreenshot = (el: HTMLElement, options?: UseScreenshotOptions) => Promise<string>
+
+export type Download = (fileName: string) => void
+
+export interface UseScreenshot {
+  // returns the data url of the screenshot
+  capture: CaptureScreenshot
+  download: Download
+  dataUrl: Ref<string>
+  error: Ref
+}

examples/vite/src/Screenshot/useScreenshot.ts

@@ -0,0 +1,79 @@
+import { toJpeg as ElToJpg, toPng as ElToPng } from 'html-to-image'
+import { ref } from 'vue'
+import type { Options as HTMLToImageOptions } from 'html-to-image/es/types'
+import type { ImageType, UseScreenshot, UseScreenshotOptions } from './types'
+
+export function useScreenshot(): UseScreenshot {
+  const dataUrl = ref<string>('')
+  const imgType = ref<ImageType>('png')
+  const error = ref()
+
+  async function capture(el: HTMLElement, options: UseScreenshotOptions = {}) {
+    let data
+
+    const fileName = options.fileName ?? `vue-flow-screenshot-${Date.now()}`
+
+    switch (options.type) {
+      case 'jpeg':
+        data = await toJpeg(el, options)
+        break
+      case 'png':
+        data = await toPng(el, options)
+        break
+      default:
+        data = await toPng(el, options)
+        break
+    }
+
+    // immediately download the image if shouldDownload is true
+    if (options.shouldDownload && fileName !== '') {
+      download(fileName)
+    }
+
+    return data
+  }
+
+  function toJpeg(el: HTMLElement, options: HTMLToImageOptions = { quality: 0.95 }) {
+    error.value = null
+
+    return ElToJpg(el, options)
+      .then((data) => {
+        dataUrl.value = data
+        imgType.value = 'jpeg'
+        return data
+      })
+      .catch((error) => {
+        error.value = error
+        throw new Error(error)
+      })
+  }
+
+  function toPng(el: HTMLElement, options: HTMLToImageOptions = { quality: 0.95 }) {
+    error.value = null
+
+    return ElToPng(el, options)
+      .then((data) => {
+        dataUrl.value = data
+        imgType.value = 'png'
+        return data
+      })
+      .catch((error) => {
+        error.value = error
+        throw new Error(error)
+      })
+  }
+
+  function download(fileName: string) {
+    const link = document.createElement('a')
+    link.download = `${fileName}.${imgType.value}`
+    link.href = dataUrl.value
+    link.click()
+  }
+
+  return {
+    capture,
+    download,
+    dataUrl,
+    error,
+  }
+}