DOM node to image

Unanswered

Brown bear posted this in #help-forum

Brown bearOP

2023-12-10T06:02:44.000Z

Does anyone happen to have a reliable way to do this? I've tried a custom solution as well as html-to-image package, however, it seems that regardless of the given element's dimensions it completely cuts off the right side of the element and i'm not sure what could be causing this other than perhaps it's somehow out of view-port?

Thanks.

9 Replies

@Brown bear Does anyone happen to have a reliable way to do this? I've tried a custom solution as well as `html-to-image` package, however, it seems that regardless of the given element's dimensions it completely cuts off the right side of the element and i'm not sure what could be causing this other than perhaps it's somehow out of view-port? Thanks.

Anay-208

2023-12-10T09:50:57.000Z

try using html2canvas. I haven't seen the package properly.

You can get canvas then convert to dataURL and/or save it

@Anay-208 try using html2canvas. I haven't seen the package properly. You can get canvas then convert to dataURL and/or save it

Brown bearOP

2023-12-10T10:39:42.000Z

Iâ€™ve unfortunately tried both, it cuts off half of my element and Iâ€™m not sure if itâ€™s a DOM limitation? Visually on the browser the element is exactly how I want it

@Brown bear Iâ€™ve unfortunately tried both, it cuts off half of my element and Iâ€™m not sure if itâ€™s a DOM limitation? Visually on the browser the element is exactly how I want it

Anay-208

2023-12-10T10:42:41.000Z

Can you send your code related wit this?

@Anay-208 Can you send your code related wit this?

Brown bearOP

2023-12-10T20:02:04.000Z

const ref = useRef<HTMLDivElement>(null)

  const onButtonClick = useCallback(() => {
    if (ref.current === null) {
      return
    }

    toPng(ref.current, { cacheBust: true, pixelRatio: 1, skipAutoScale: true,})
      .then((dataUrl) => {
        const link = document.createElement('a')
        link.download = 'hero.png'
        link.href = dataUrl
        link.click()
        console.log('data url', dataUrl)
      })
      .catch((err) => {
        console.log(err)

        console.log('ref', ref.current)
      })
  }, [ref])

  <div ref={ref} className="container">

    <ComponentToRender />

</div>

<button onClick={onButtonClick}>Click Me</button>