search

bubkoo / html-to-image

✂️ Generates an image from a DOM node using HTML5 canvas and SVG.
MIT License
5.41k stars 505 forks source link

Issue with Next/Image component #350

Open imjoshnewton opened 1 year ago

imjoshnewton commented 1 year ago

I am trying to save a component as a PNG in a NextJs application. I was running into problems downloading the image in Safari and traced the issue to the image embedding step. The biggest problem I was having was that I wasn't getting any kind of error message. I would just click the button and nothing would happen. It didn't seem like any of the functions from html-to-image were running at all as they produced no logs and no output.

After recreating most of the toPNG function and all of its sub components in my component I found that everything was running but it was the embedImages function that wasn't returning anything.

I ended up realizing I had two issues: 1. Using the Next/Image component meant I got 0 feedback on any issues whatsoever and 2. that I needed to set a CORS policy on my firebase storage bucket. Even after updating the CORS policy, rending the component to an image still doesn't work with the Next/Image component.

Expected Behavior

Images should be embedded even when using the Next/Image component.

Current Behavior

The Image fails to render from the Safari browser

Possible Solution

Possibly identify usage of this component and replace it with a basic image tag for rendering?

Steps To Reproduce

Create a component that uses the Next/Image component and then attempt to save it with toPNG, toJPEG, toCanvas, toBlob, etc.

Error Message & Stack Trace

Part of the issue is that no error is reported at all.

Additional Context

Your Environment

vivcat[bot] commented 1 year ago

👋 @imjoshnewton

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

harshhhdev commented 1 year ago

I've been having this issue too. The component exports, but it does not update when I change the props.

JKornberg commented 1 year ago

Same issue, using an image in /public as a backgroundImage and it doesn't render sometimes on chrome mobile and never on safari

imjoshnewton commented 1 year ago

As an update to this issue, I can sometimes get the image to export with a basic tag. It works consistently in Chrome, never when my app is running as a PWA, and sometimes after several refreshes in Safari on desktop and on mobile.

My current hypothesis is that maybe the ref isn't getting updated once the image has loaded or maybe the image file isn't being properly embedded before the image is exported?

kiikoh commented 1 year ago

html2canvas works better i've found