bubkoo / html-to-image

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

Using url from firebase storage as src for img tag, results in error Object event #438

Open p-shepherd opened 9 months ago

p-shepherd commented 9 months ago

Using url from firebase storage as src for img tag, results in error Object event, but using other types of urls as src for img tag, enables html to image download as svg without any problems.

Expected Behavior

html dom should be downloaded to svg

Current Behavior

Clicking download button results in an error, when img src url is from firebase storage, not if image is from some other place (other url from other website). my firebase for testing it right now looks like this, so rules shouldn't been an issue.

rules_version = '2'; service firebase.storage { match /b/{bucket}/o { // Allow anyone to read. match /{allPaths=**} { allow read; }

// Allow anyone to write.
match /{allPaths=**} {
  allow write;
}

} }

ERROR [object Event] at handleError (https://8jmhgw-3000.csb.app/static/js/bundle.js:342395:58) at https://8jmhgw-3000.csb.app/static/js/bundle.js:342418:7

Possible Solution

I don't have any experience with urls, I was wondering about the blob method, but I am stuck on it because fetch doesnt work for me, i was also wondering of somehow changing the url to something else with some library, that will look different, or sending images from firebase storage to some other cloud drive, and getting a link from there, but I haven't done it yet.

Steps To Reproduce

In react, I have a method that works like this.

1Upload image to firebase storage

  1. get url to this image from firebase storage
  2. use it as a state of setImgUrl
  3. use imgUrl const as src for

    const uploadImage = () => { if (imgUpload === null) return; const imageRef = ref(storage, images/${userId}/${imgUpload.name + v4()}); uploadBytes(imageRef, imgUpload).then(() => { getDownloadURL(imageRef).then((url) => { // place for changing url to blob url console.log(Message sent to database: ${url}); setImgUrl(url); setChecker("image"); alert("Image uploaded"); }); }); };

Error Message & Stack Trace

```txt ```

Additional Context

Your Environment

React/ReactFlow/CodeSandbox/Chrome/html-to-image 1.11.11

vivcat[bot] commented 9 months ago

👋 @p-shepherd

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.

antunesgabriel commented 4 weeks ago

i have the same error