feat: use screen capture for slides snapshot

Author: antfu

packages/client/constants.ts

@@ -83,5 +83,4 @@ export const HEADMATTER_FIELDS = [
   'mdc',
   'contextMenu',
   'wakeLock',
-  'overviewSnapshots',
 ]

packages/client/internals/QuickOverview.vue

@@ -4,15 +4,18 @@ import { computed, ref, watchEffect } from 'vue'
 import { createFixedClicks } from '../composables/useClicks'
 import { useNav } from '../composables/useNav'
 import { CLICKS_MAX } from '../constants'
-import { configs, pathPrefix } from '../env'
+import { pathPrefix } from '../env'
 import { currentOverviewPage, overviewRowCount } from '../logic/overview'
+import { isScreenshotSupported } from '../logic/screenshot'
+import { snapshotManager } from '../logic/snapshot'
 import { breakpoints, showOverview, windowSize } from '../state'
 import DrawingPreview from './DrawingPreview.vue'
 import IconButton from './IconButton.vue'
 import SlideContainer from './SlideContainer.vue'
 import SlideWrapper from './SlideWrapper.vue'
 
-const { currentSlideNo, go: goSlide, slides } = useNav()
+const nav = useNav()
+const { currentSlideNo, go: goSlide, slides } = nav
 
 function close() {
   showOverview.value = false
@@ -48,6 +51,12 @@ const rowCount = computed(() => {
 
 const keyboardBuffer = ref<string>('')
 
+async function captureSlidesOverview() {
+  showOverview.value = false
+  await snapshotManager.startCapturing(nav)
+  showOverview.value = true
+}
+
 useEventListener('keypress', (e) => {
   if (!showOverview.value) {
     keyboardBuffer.value = ''
@@ -129,7 +138,7 @@ watchEffect(() => {
             <SlideContainer
               :key="route.no"
               :no="route.no"
-              :use-snapshot="configs.overviewSnapshots"
+              :use-snapshot="true"
               :width="cardWidth"
               class="pointer-events-none"
             >
@@ -157,7 +166,10 @@ watchEffect(() => {
       </div>
     </div>
   </Transition>
-  <div v-if="showOverview" class="fixed top-4 right-4 z-modal text-gray-400 flex flex-col items-center gap-2">
+  <div
+    v-show="showOverview"
+    class="fixed top-4 right-4 z-modal text-gray-400 flex flex-col items-center gap-2"
+  >
     <IconButton title="Close" class="text-2xl" @click="close">
       <div class="i-carbon:close" />
     </IconButton>
@@ -172,5 +184,13 @@ watchEffect(() => {
     >
       <div class="i-carbon:list-boxes" />
     </IconButton>
+    <IconButton
+      v-if="__DEV__ && isScreenshotSupported"
+      title="Capture slides as images"
+      class="text-2xl"
+      @click="captureSlidesOverview"
+    >
+      <div class="i-carbon:drop-photo" />
+    </IconButton>
   </div>
 </template>

packages/client/internals/SlideContainer.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { provideLocal, useElementSize, useStyleTag } from '@vueuse/core'
-import { computed, onMounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useNav } from '../composables/useNav'
 import { injectionSlideElement, injectionSlideScale } from '../constants'
 import { slideAspect, slideHeight, slideWidth } from '../env'
+import { isDark } from '../logic/dark'
 import { snapshotManager } from '../logic/snapshot'
 import { slideScale } from '../state'
 
@@ -65,15 +66,9 @@ provideLocal(injectionSlideScale, scale)
 provideLocal(injectionSlideElement, slideElement)
 
 const snapshot = computed(() => {
-  if (!props.useSnapshot || props.no == null)
+  if (props.no == null || !props.useSnapshot)
     return undefined
-  return snapshotManager.getSnapshot(props.no)
-})
-
-onMounted(() => {
-  if (container.value && props.useSnapshot && props.no != null) {
-    snapshotManager.captureSnapshot(props.no, container.value)
-  }
+  return snapshotManager.getSnapshot(props.no, isDark.value)
 })
 </script>
 
@@ -84,13 +79,17 @@ onMounted(() => {
     </div>
     <slot name="controls" />
   </div>
-  <!-- Image preview -->
-  <img
-    v-else
-    :src="snapshot"
-    class="w-full object-cover"
-    :style="containerStyle"
-  >
+  <!-- Image Snapshot -->
+  <div v-else class="slidev-slide-container w-full h-full relative">
+    <img
+      :src="snapshot"
+      class="w-full h-full object-cover"
+      :style="containerStyle"
+    >
+    <div absolute bottom-1 right-1 p0.5 text-cyan bg-cyan:10 rounded op50 title="Snapshot">
+      <div class="i-carbon-camera" />
+    </div>
+  </div>
 </template>
 
 <style scoped lang="postcss">

packages/client/internals/SlidesShow.vue

@@ -7,7 +7,7 @@ import { createFixedClicks } from '../composables/useClicks'
 import { useNav } from '../composables/useNav'
 import { useViewTransition } from '../composables/useViewTransition'
 import { CLICKS_MAX } from '../constants'
-import { skipTransition } from '../logic/hmr'
+import { disableTransition, skipTransition } from '../logic/hmr'
 import { activeDragElement } from '../state'
 import DragControl from './DragControl.vue'
 import SlideWrapper from './SlideWrapper.vue'
@@ -76,8 +76,8 @@ function onAfterLeave() {
 
   <!-- Slides -->
   <component
-    :is="hasViewTransition && !isPrintMode ? 'div' : TransitionGroup"
-    v-bind="skipTransition || isPrintMode ? {} : currentTransition"
+    :is="(hasViewTransition && !isPrintMode && !skipTransition && !disableTransition) ? 'div' : TransitionGroup"
+    v-bind="(skipTransition || disableTransition || isPrintMode) ? {} : currentTransition"
     id="slideshow"
     tag="div"
     :class="{

packages/client/logic/hmr.ts

@@ -1,3 +1,4 @@
 import { ref } from 'vue'
 
 export const skipTransition = ref(false)
+export const disableTransition = ref(false)

packages/client/logic/snapshot.ts

@@ -1,11 +1,26 @@
+import type { SlidevContextNavFull } from '../composables/useNav'
+import type { ScreenshotSession } from './screenshot'
+import { sleep } from '@antfu/utils'
+import { useLocalStorage } from '@vueuse/core'
+import { slideHeight, slideWidth } from '../env'
 import { snapshotState } from '../state/snapshot'
+import { isDark } from './dark'
+import { disableTransition } from './hmr'
+import { startScreenshotSession } from './screenshot'
 import { getSlide } from './slides'
 
+const chromeVersion = window.navigator.userAgent.match(/Chrome\/(\d+)/)?.[1]
+export const isScreenshotSupported = chromeVersion ? Number(chromeVersion) >= 94 : false
+
+const initialWait = 100
+const delay = useLocalStorage('slidev-export-capture-delay', 400, { listenToStorageChanges: false })
+
 export class SlideSnapshotManager {
-  private _capturePromises = new Map<number, Promise<void>>()
+  private _screenshotSession: ScreenshotSession | null = null
 
-  getSnapshot(slideNo: number) {
-    const data = snapshotState.state[slideNo]
+  getSnapshot(slideNo: number, isDark: boolean) {
+    const id = slideNo + (isDark ? '-dark' : '-light')
+    const data = snapshotState.state[id]
     if (!data) {
       return
     }
@@ -18,67 +33,76 @@ export class SlideSnapshotManager {
     }
   }
 
-  async captureSnapshot(slideNo: number, el: HTMLElement, delay = 1000) {
+  private async saveSnapshot(slideNo: number, dataUrl: string, isDark: boolean) {
     if (!__DEV__)
-      return
-    if (this.getSnapshot(slideNo)) {
-      return
-    }
-    if (this._capturePromises.has(slideNo)) {
-      await this._capturePromises.get(slideNo)
-    }
-    const promise = this._captureSnapshot(slideNo, el, delay)
-      .finally(() => {
-        this._capturePromises.delete(slideNo)
-      })
-    this._capturePromises.set(slideNo, promise)
-    await promise
-  }
-
-  private async _captureSnapshot(slideNo: number, el: HTMLElement, delay: number) {
-    if (!__DEV__)
-      return
+      return false
     const slide = getSlide(slideNo)
     if (!slide)
-      return
+      return false
 
+    const id = slideNo + (isDark ? '-dark' : '-light')
     const revision = slide.meta.slide.revision
+    snapshotState.patch(id, {
+      revision,
+      image: dataUrl,
+    })
+  }
 
-    // Retry until the slide is loaded
-    let retries = 100
-    while (retries-- > 0) {
-      if (!el.querySelector('.slidev-slide-loading'))
-        break
-      await new Promise(r => setTimeout(r, 100))
-    }
+  async startCapturing(nav: SlidevContextNavFull) {
+    if (!__DEV__)
+      return false
 
-    // Artificial delay for the content to be loaded
-    await new Promise(r => setTimeout(r, delay))
+    // TODO: show a dialog to confirm
+
+    if (this._screenshotSession) {
+      this._screenshotSession.dispose()
+      this._screenshotSession = null
+    }
 
-    // Capture the snapshot
-    const toImage = await import('html-to-image')
     try {
-      const dataUrl = await toImage.toPng(el, {
-        width: el.offsetWidth,
-        height: el.offsetHeight,
-        skipFonts: true,
-        cacheBust: true,
-        pixelRatio: 1.5,
-      })
-      if (revision !== slide.meta.slide.revision) {
-        // eslint-disable-next-line no-console
-        console.info('[Slidev] Slide', slideNo, 'changed, discarding the snapshot')
-        return
+      const scale = 2
+      this._screenshotSession = await startScreenshotSession(
+        slideWidth.value * scale,
+        slideHeight.value * scale,
+      )
+
+      disableTransition.value = true
+      nav.go(1, 0, true)
+
+      await sleep(initialWait + delay.value)
+      while (true) {
+        if (!this._screenshotSession) {
+          break
+        }
+        this.saveSnapshot(
+          nav.currentSlideNo.value,
+          this._screenshotSession.screenshot(document.getElementById('slide-content')!),
+          isDark.value,
+        )
+        if (nav.hasNext.value) {
+          await sleep(delay.value)
+          nav.nextSlide(true)
+          await sleep(delay.value)
+        }
+        else {
+          break
+        }
       }
-      snapshotState.patch(slideNo, {
-        revision,
-        image: dataUrl,
-      })
-      // eslint-disable-next-line no-console
-      console.info('[Slidev] Snapshot captured for slide', slideNo)
+
+      // TODO: show a message when done
+
+      return true
     }
     catch (e) {
-      console.error('[Slidev] Failed to capture snapshot for slide', slideNo, e)
+      console.error(e)
+      return false
+    }
+    finally {
+      disableTransition.value = false
+      if (this._screenshotSession) {
+        this._screenshotSession.dispose()
+        this._screenshotSession = null
+      }
     }
   }
 }

packages/client/package.json

@@ -47,7 +47,6 @@
     "file-saver": "catalog:",
     "floating-vue": "catalog:",
     "fuse.js": "catalog:",
-    "html-to-image": "catalog:",
     "katex": "catalog:",
     "lz-string": "catalog:",
     "mermaid": "catalog:",

packages/client/state/snapshot.ts

@@ -1,7 +1,7 @@
 import serverSnapshotState from 'server-reactive:snapshots?diff'
 import { createSyncState } from './syncState'
 
-export type SnapshotState = Record<number, {
+export type SnapshotState = Record<string, {
   revision: string
   image: string
 }>

packages/parser/src/config.ts

@@ -41,7 +41,6 @@ export function getDefaultConfig(): SlidevConfig {
     transition: null,
     editor: true,
     contextMenu: null,
-    overviewSnapshots: false,
     wakeLock: true,
     remote: false,
     mdc: false,

packages/types/src/frontmatter.ts

@@ -221,13 +221,6 @@ export interface HeadmatterConfig extends TransitionOptions {
    * @default ''
    */
   exportFilename?: string | null
-  /**
-   * Use image snapshot for quick overview
-   *
-   * @experimental
-   * @default false
-   */
-  overviewSnapshots?: boolean
   /**
    * Enable Monaco
    *