# stageImage

Source: https://sdk.pdf.net/docs/v1/reference/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.

```ts
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](https://sdk.pdf.net/docs/v1/reference/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 [#example]

```tsx
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 })
  }
}
```

