Capture Plugin

import { createPluginRegistration } from '@embedpdf/core'
// ... other imports
import { RenderPluginPackage } from '@embedpdf/plugin-render/vue'
import { InteractionManagerPluginPackage } from '@embedpdf/plugin-interaction-manager/vue'
import { CapturePluginPackage } from '@embedpdf/plugin-capture/vue'
 
const plugins = [
  // ... other essential plugins
  createPluginRegistration(LoaderPluginPackage, { /* ... */ }),
  createPluginRegistration(ViewportPluginPackage),
  createPluginRegistration(ScrollPluginPackage),
 
  // Register dependencies first
  createPluginRegistration(RenderPluginPackage),
  createPluginRegistration(InteractionManagerPluginPackage),
 
  // Register and configure the capture plugin
  createPluginRegistration(CapturePluginPackage, {
    scale: 2.0, // Render captured image at 2x resolution
    imageType: 'image/png',
    withAnnotations: true,
  }),
]

<script setup lang="ts">
import { PagePointerProvider } from '@embedpdf/plugin-interaction-manager/vue';
import { MarqueeCapture } from '@embedpdf/plugin-capture/vue';
</script>
<template>
  <Scroller>
    <template #default="{ page }">
      <PagePointerProvider
        :page-index="page.pageIndex"
        :page-width="page.width"
        :page-height="page.height"
        :rotation="page.rotation"
        :scale="page.scale"
      >
        <RenderLayer :page-index="page.pageIndex" />
        <MarqueeCapture :page-index="page.pageIndex" :scale="page.scale" />
      </PagePointerProvider>
    </template>
  </Scroller>
</template>

<script setup lang="ts">
import { useCapture } from '@embedpdf/plugin-capture/vue';
 
const { provides: capture, isMarqueeCaptureActive } = useCapture();
</script>
 
<template>
  <button @click="capture?.toggleMarqueeCapture()">
    {{ isMarqueeCaptureActive ? 'Cancel' : 'Capture Area' }}
  </button>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { useCapture, type CaptureAreaEvent } from '@embedpdf/plugin-capture/vue';
 
const { provides: capture } = useCapture();
const imageUrl = ref<string | null>(null);
let unsubscribe: (() => void) | undefined;
 
onMounted(() => {
  if (!capture.value) return;
  unsubscribe = capture.value.onCaptureArea((result: CaptureAreaEvent) => {
    const newUrl = URL.createObjectURL(result.blob);
    imageUrl.value = newUrl;
  });
});
 
onUnmounted(() => {
  unsubscribe?.();
  if (imageUrl.value) URL.revokeObjectURL(imageUrl.value);
});
</script>
 
<template>
  <p v-if="!imageUrl">Select an area to capture.</p>
  <img v-else :src="imageUrl" alt="Captured PDF area" />
</template>