Comments (10)
Having same issue here.
@steven-tey any solution?
from satori.
from satori.
When the svg document contains a ,
(comma) inside, satori's regex greedily matches the group encodingType
up to the last occurrence of ,
. This results in incorrect parsing of encodingType
and dataString
.
from satori.
not sure if that's the root case @kiwiyou, just tested out the preview URL in the PR and it doesn't seem to work: playground link
![CleanShot 2024-03-05 at 18 46 00@2x](https://private-user-images.githubusercontent.com/28986134/310207086-63a731d5-697c-4b19-b4a4-91907f45ed83.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTU5NzU5MjAsIm5iZiI6MTcxNTk3NTYyMCwicGF0aCI6Ii8yODk4NjEzNC8zMTAyMDcwODYtNjNhNzMxZDUtNjk3Yy00YjE5LWI0YTQtOTE5MDdmNDVlZDgzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA1MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNTE3VDE5NTM0MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWE5M2RmOTRhOTc2NmU4ODg5ODUwOWNjZTk3NDcwYjIxOTVkNWQ2YmQ0Zjc2NjY5YWIyNGZlMzM1N2IwYjAwODQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.0mvEGVapVrmtWpwudypmWPzN5OxjlA5XuC9I3UNqb7o)
from satori.
@steven-tey After some inspecting, it turns out that there are two problems in satori's image rendering process:
- Invalid parsing of plaintext data URI for svgs.
- Invalid caching of remote images.
The issue @fonstack reported seems to be the first case, which is explained and resolved, and this issue the other. Check #597 and #596 for the former.
The root cause of the second case is that satori clears the cache for image sizes on every invocation without clearing the cache for remote image fetching. The first invocation of satori actually does render the image well. But rendering with the same remote image URL again makes it assume that the image has already fetched and its size has been cached, only to fail because of the cleared cache. In the other words, it is not that images in SVG doesn't work when exported to PNG, but that images in SVG doesn't work when rendered again. Please correct me if I'm wrong.
Some reference:
- satori clearing the image size cache
Lines 92 to 93 in 9bc47fd
- satori's global fetching cache
Line 65 in 9bc47fd
- satori updating image size cache only on the first fetch
Lines 226 to 228 in 9bc47fd
Lines 235 to 271 in 9bc47fd
from satori.
Maybe the correct workaround is one of two:
- Clear the
inflightRequests
cache on every invocation. - Update cache on early return based on
inflightRequests
cache.
from satori.
Hey @kiwiyou @steven-tey @Jackie1210 any update on this? I need this to be fixed in order to launch a product in production :)
from satori.
@fonstack Your problem should be fixed in #596.
from satori.
thanks! any estimated time for the merge of the PR? @kiwiyou
from satori.
I have neither privilege nor enough information for the estimation. Would you refer to the relevant issue #597 and PR #596, instead of this issue #592, and wait for the maintainer's response? Your problem doesn't seem to be directly related to this issue. (Check comment #592 (comment))
from satori.
Related Issues (20)
- Using CSS `border`, images are broken and exposed
- Optional TailwindCSS
- Functionality for getting bounding box of text from satori
- 2x faster with SatoriOptions.fonts as a global variable HOT 2
- Title HOT 1
- Transparent linear gradient rendered incorrectly HOT 2
- `word-break: keep-all` breaks when used with `text-wrap: balance`
- Satori cannot render svg data URI with comma inside
- Misplacement text when Embed Font is turned off
- Satori does not work with components which are using forwardRef HOT 1
- BUG: Fails to apply HSL colors with a decimal point in the hue. HOT 4
- Absolute child of fragment does not position properly with true relative parent
- Type 'ArrayBuffer' is not assignable to type 'string'. when using local image. HOT 3
- Base64 encoded Webp Images are not working
- `span` background does not match the way browser renders HOT 2
- Error: t is undefined when using base64-encoded image as `background-image` HOT 3
- `lineClamp` / `textOverflow` incorrectly overflows after first word in a line HOT 1
- Add links to text/images
- @vercel/og and next/og: Can't load image: Unsupported image type: unknown
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from satori.