Capture Plugin

import { createPluginRegistration } from '@embedpdf/core'
import { EmbedPDF } from '@embedpdf/core/react'
// ... other imports
import { RenderPluginPackage } from '@embedpdf/plugin-render/react'
import { InteractionManagerPluginPackage } from '@embedpdf/plugin-interaction-manager/react'
import { CapturePluginPackage } from '@embedpdf/plugin-capture/react'
 
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,
  }),
]

import { PagePointerProvider } from '@embedpdf/plugin-interaction-manager/react';
import { MarqueeCapture } from '@embedpdf/plugin-capture/react';
 
// ...
<Scroller
  renderPage={({ width, height, pageIndex, scale, rotation }) => (
    <PagePointerProvider {...{ pageIndex, width, height, scale, rotation }}>
      <RenderLayer pageIndex={pageIndex} />
      <MarqueeCapture pageIndex={pageIndex} scale={scale} />
    </PagePointerProvider>
  )}
/>

import { useCaptureCapability } from '@embedpdf/plugin-capture/react';
 
const CaptureToolbar = () => {
  const { provides: capture } = useCaptureCapability();
  const isActive = capture?.isMarqueeCaptureActive();
 
  return (
    <button onClick={() => capture?.toggleMarqueeCapture()}>
      {isActive ? 'Cancel' : 'Capture Area'}
    </button>
  );
}

import { useEffect, useState } from 'react';
import { useCaptureCapability, CaptureAreaEvent } from '@embedpdf/plugin-capture/react';
 
const CaptureResult = () => {
  const { provides: capture } = useCaptureCapability();
  const [imageUrl, setImageUrl] = useState<string | null>(null);
 
  useEffect(() => {
    if (!capture) return;
 
    const unsubscribe = capture.onCaptureArea((result: CaptureAreaEvent) => {
      const newUrl = URL.createObjectURL(result.blob);
      setImageUrl(newUrl);
    });
 
    return () => {
      unsubscribe();
      if (imageUrl) URL.revokeObjectURL(imageUrl);
    };
  }, [capture]);
 
  if (!imageUrl) return <p>Select an area to capture.</p>;
 
  return <img src={imageUrl} alt="Captured PDF area" />;
};