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(DocumentManagerPluginPackage, { /* ... */ }),
  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 :document-id="activeDocumentId">
    <template #default="{ page }">
      <PagePointerProvider :document-id="activeDocumentId" :page-index="page.pageIndex">
        <RenderLayer :document-id="activeDocumentId" :page-index="page.pageIndex" />
        <MarqueeCapture :document-id="activeDocumentId" :page-index="page.pageIndex" />
      </PagePointerProvider>
    </template>
  </Scroller>
</template>

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

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { useCapture, type CaptureAreaEvent } from '@embedpdf/plugin-capture/vue';
 
const props = defineProps<{ documentId: string }>();
const { provides: capture } = useCapture(() => props.documentId);
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>