useToPng hook produces blank white image when capturing iframe content

[wiscaksono]

Description

The useToPng hook from @hugocxl/react-to-image is not working as expected when trying to convert an iframe to a PNG image. The resulting image is blank white, despite the iframe containing visible content.

Link to Reproduction

See the on the additional information

Steps to reproduce

1. Create a React component with an iframe.
2. Implement the useToPng hook from @hugocxl/react-to-image.
3. Attempt to convert the iframe to a PNG image.
4. Observe that the resulting image is blank white.

Version

0.0.8

Browser

Google Chrome Version 127.0.6533.72 (Official Build) (arm64)

Operating System

• Windows
• macOS
• Linux

Additional Information

This issue may be related to cross-origin restrictions when trying to access iframe content. It would be helpful if the library could provide more detailed error information or alternative methods for capturing iframe content.

Here's a code snippet demonstrating the issue:

import { useToPng } from '@hugocxl/react-to-image'

export const Example = () => {
  const [state, convert, ref] = useToPng<HTMLIFrameElement>({
    quality: 0.8,
    onSuccess: data => {
      console.log(data)
      const link = document.createElement('a')
      link.download = 'iframe_capture.png'
      link.href = data
      link.click()
    },
    onStart: () => console.log('started'),
    onError: console.error
  })

  return (
    <>
      <button onClick={convert} disabled={state.isLoading}>
        Convert
      </button>
      <iframe ref={ref} src={'https://example.com/'} width='100%' height={`100%`} />
    </>
  )
}

Any insights or potential solutions would be greatly appreciated. Thank you for your time and effort in maintaining this library!