stageImage

Validates and measures an image so it can be placed on a page. The { type: 'addImage', image } interaction tool accepts only staged images, so holders can rely on the image being loadable and its size being real.

const stagedImage = await stageImage(blob)
  • blob is an image in any format the browser can decode. SVGs are accepted and rasterized when the PDF is saved.
  • The staged image carries the blob and its naturalWidth and naturalHeight in image pixels.
  • The size on the page is chosen when placing the image, with the width and height of the addImage tool (see useInteractionTool).
  • Throws InvalidInputError when the blob is not a loadable image or has no intrinsic size (such as an SVG without absolute root width and height).

Example

import { stageImage, useSetInteractionMode } from '@sdk-pdf/react'

function useStartImagePlacement() {
  const setInteractionMode = useSetInteractionMode()

  return async (file: File) => {
    const image = await stageImage(file)
    // The next click on a page places the image, 200 user-space units wide.
    setInteractionMode({ type: 'addImage', image, width: 200 })
  }
}

On this page