Coder Social home page Coder Social logo

Comments (10)

fonstack avatar fonstack commented on July 23, 2024

Having same issue here.

@steven-tey any solution?

from satori.

fonstack avatar fonstack commented on July 23, 2024

@Jackie1210

https://og-playground.vercel.app/?share=xVvbbtvIlv2VwIPBeegMWjc3kpzuAzim49BjUlEsWaHRLzalUKIkO4ikSGSj_33WWruKpGwnPZcG5kHYvBSrdu37pfTHUfowmR69Ofp1Mv_2-_2LF-tNsZz-9scfvH7xYjadZ7PNmxf_aLda__6Pl_ZwN59sZo-eTebrL8vbAk8_L6d7_5TXwfzrNN3MH-7xLn1Yblf3_u3tcp7dh5vpas1X0_vN9Kt_lW_Xm_nn4vQBD--5_uHru9t0kX192N5PTh-WD1_x_t8-f_5crYqvrubl9M2LbqfxaOz28kurpad__vn7_b948et8dZtNbVu__X6Ebf1-5HZe336dfsbN5HZz-0bDf15_y37ar5b_TGe3X9fTzW_bzef_ePXPu9v19Jfeyw_v485N8bZzO77uDlavex-uwl0YnGTR8Oz4Mh-14-JkHwXJtn8VZtPz9vruPnodrmatyfuTXy6L191JN91Oymh71724vyzDXRScfEu7N_fh_O0i-fRxdjk-nt2NR6_DxX42HV8XYXA2D8-Xiw9XF1HyablMl6_2Yd77z_D05NXkfNm6Ox_9NPh00UpWr2fpapBF5eDVZffjl8n5fvkhe8jCYH8veHqSfXj_djY5z7Kb1XJ9F7TmYXmxiPLBPirC7Ab3w-HZLpr39nG5WEflchYNB9t-MDi-DM5al3nW6l_tdpfByTo6bfUu83CNse2kaG3jq155edXD_pNNdNXD2OUa9-3LPNpc5gs-w_UZrt_ll3kKmK3xrLwcnm3j-a64HIbb-Hy3jeatbdSJDM41J74bYfxkbXN9xPchYLiNbN02xnSTIb7JT4Cnh8QRuJ66OYKzHfAoo_luH532jqMSuPM9xgEX4Xd32iswFrhznZvS1hnZOoXeuf2kws_tuXswrnNWYEw7PsWeDDp62d763CPG9cfA8wp7tHkxR0Qc9hhre8O7-BT32htoUybYk4fV3vj-OCkb33AOzqd5bI0Y_BRv_HcVL27GUf5uhnWP4yHo4aHhjPccM8nBa-ACXDkXcAfc4x1lwPgkXA_eV_d9G4PxFzPsp4zKaO2hrcM1-LvOgRfx7OAnuXDz4NvU1iK9-PNrvk9Mnuy7lr7jPnnN7ztn4OGiBA88NF64OSB3Hay9j64q6GUbdOS6okkrasIKZ_I8WZO20PsK1rRLpQd3jkbx-dmeY_rBaB0Nk200zCCTjh_DM47taSxlaEwZ429AuZL-OBnl_rhXygyvuWf-jGb1NWlw7GigvcWF7RGw3iN_K78OaSk9hS5CJ0V36H8BnIeDdQXd_qCbRuMryTntQNnYD2W3RXntDyPIoofN9-RJAlpAl3K-O6MelRV-VzvIEud-B_2E3K_OYG8gNcXOw3rc6Q64XmMc5h2Dj_NeLyZO0Jt-kHi89tAX4HS27X8C_VfUDdDKeIvvMR73sAGcCzYGc-n5Avzj_DHGxrP-aW9HHnro5IFr6_sJvuuf01ZCJjiXX1u6DXpp7TPo3wnkYedhQy651gXXMrmWHNBGyh4eS0bAa9rcSh7EO-z1fKex0o9CMkC8qXc92A3iI1jLaAR7dfANZQc092tTxjFGskLamE12a5scCj-MeU8IG-TstskyxtIuD9NCdlmwogf2CJ5pjgvaoLIfiBcGKz0bQIaJI76XrJpdcHYTdI45B3B9R950-9BBD_0ckhHgFAfgZUlfVuFA-eJeAbmW-R3a9TvySvJHX2X-a8K9jUUv96NuLo1WDbtNXeH-YUMot5y7Z_5AsOK16Kr5vL5n-M28PfN67mGRDEfbeDjoXQYeVva8R3oaXx7ZSPJBOCAmka4KVjaA9jk-F13djzwX3fGDzYbMRZQdB728mw8AnwrosceDtAbPTd9heyvo9R73p63iVjjB30FPSbc-5Zj-byg70uN74kR553v43i5tBr5FfKHnbflEZ1sM1rbFZJB7zXrGQ0G_Z9xjH5Q_xQSjAjENY4J2lCPm8faNOJHO0EfiZ3ab8tO023gvmt54GXSydBA3tG-Dt_bceMl4xXw-5Yx7le45vtF-Fb2d4hPqThDVOkO7Cbp7n-L0wf2kf45v0gknM8_qH2WGuo6Yx63dac7l5UA_P562xv_oZ5oy6n_Qd-jAMANtPax0zcdyoA9-TR3kfBwfLKBHHlZ4yqdVeyaupOsq4rvHeuLsDuT6OinM_58cQxY8PPD_zl5aTOm-f8Qj88nUI9n0DHLGeJjxSB270GfKNmg9-Ursp8IffHs3ls_vCGfFXrRJpkPX5EOLuh0F8NWQOYOVz5I_jlYabzGn5MDwTWBrzJYqfgRtBy6WsH2494pbzVdqTfpUxn-I73_kf6kr0HXpPvbsYa0jiAFg-6VrKeMrD72uYS3Ko2hiMuh5ID3Ec9nOkPzpch7KftNHaQ36bNnJgYtXnE-ifVBcyzjHv4f-gG4-tjcbR5_6kTqBdRRnMvZgjMb1SV9C47X3b7AxLm_w42BzQPcgxD48rHhMG-B0n_uNzK7Crnj_bfZY8kX5l6-gf4BdMv5wTvMttNe0AZ2IORjpm0fN2F308H4b8Q5jiAL88rDat4slEL-7vMrrLfiuWKDYOZluyCppeZ8wBmV-QRrYM_kVzsec4VpzKr5hLoTnpE2UMzfxsJGjkDbE1Y8XXsg75rRzsKse1rEUaWG0oR2lflCO5Z-VK0k-Td41r9lg0l3PriHXJ7DVC9hw2vjo-HG8qFyP8iJcmEs6XeEauOY7xHHmsyXfgnUuxzHywyno52Gls_h-JnzgxyyPxT4gr8AdPsTiJs4B-mN_c4eL9Njpl-YAH_AN5ZI-CvuyvIi2y_Ii5YygPcamO8o55uhGAXJrpz-IhSy3Rk4B2sif0haB9_R5nI-6DxrNFOtLR5t5kHQa8WBFZ_BPfFF8ZXGg4h7afrONTraatMK-uZeaB6bXI-4LuFd-FzQj3fUe84FW-QLjPGzQN3j3EGGcbADXV83A6Ir1MafJw18_93RnfYHxK2KSPONY2lbJl2Ia8k_yq3t9Z7Dx_r14Sv2mL5DMYH8eVvSgDcfcrC8wPqA-Y23ihTldvGixmmAtt_Jv1Zrw7aT3QvQ-mB9zYxxk64K1EtIS-9Za7nvoHmkQpKwpyPY2vme8tI7GGWMRXC9g5xjHNesl4McK74ErZGjHPM1BPwfWpsxlyvups5bLVTpC-VZ-YjqHfTOGtVysuIb9MJkeIfaSTLcRezVlhDZjP8EP8Q14l7Uh-yVkoRcPK9knzbC3Jd6z5gR8mLPKlin2ow118qt4kH7Z4i9fH4INQd5a23nQ2ew07HFueTztB-YljYgHamZcZ1cQl1vQOimZfytvpm9jDAddw9wa19K4RPWAM-ieh9V6intVF6P9Zc5q-QntuK-1sW6lGEjyqn0wBqBu0EZQrujDwAfsB3mDs4mjVh0TU7Y4lv7G58zkfdY5GGM1gXFckp6cE_hqDcq93qkO4WIO5sC-VkZ7D33lnKoZ1vEfacp3ioGIV9alPwEPkKtW9RT5Z8qLaKocg3JAP6q8gHmZ-VPW1WhnvO9S_vY9X1PN4eo7DVi9V25d1awOa1f197QhlBkPG3i7-BZ8zDP5R4MVjxVrOt7V-b747fiuPTXzfa554XCLZ1F5ctwfjjpRnrbjYdKJyxTxCfU22vWHi3ach90Y72PqXz5oxMGWh0N-jG_y4aqDQFabdsdw6Vs-y1qa6qyYu-GzlXe42qzqR76e4OSANktxldXpnhknm-X8CHgEPfCwkhXmTMTX5TaQvwD6T70RbOipxcBuHOcZKHY3WI3juvCvltc4HriaBv1CVTt1tRBX3-gwF0CsbHauEe8arcyuKO-GbKf0hR7W46ATTm9pA62ep3VhU1g3pT3WusrF_LrylZCxuoZhNPPxPmiHvkOQQd48PKiD1-MqHeW-6NOlo9-JARirxwFsE30jfQX6AJJp1toQr7NXQNtxQt_E92X_-mH-Id99S8_ftW4D9SoO-hDsXejd6dvV7Xi_Rg8lT8qofROMeuyDoNcRQ6Yhx_RRA-AJm2M1asQz8OXyj-EG-gh-Qgfoc8sB4oKQuU4L7z3-9M0b2uikpF93fQvN0UK8TN8_2iCv555xzX0srI4Nn4X4CTYb32FP9AvwN6x5PKmfaB7mvldcT3gBT8hl0QLutNN8rlwKMRf2JX8YbRivpQVxYu0HeSH3OFcth3qmOgt9nWK45vUnXx9hXKIYljUayHpIO16SPqznN2wd5gbOiMVcv4YyRz_m-jVpFStCz-lzGRvKHuE58zz2T6xGQ79HOgYhvidNwW_YdsgEczk8q-vgFier3mr9Ddpx4i-fkJJObb8m3sPfSRaJO-aCHYPs1dfcZ8b6HnMSxibARfunvSJtmAc7_aBfwDPuE_IsP636L3jLmIJjA8UYa8kO6lj00dy389uMzc1vC0fsU2Pgs1Ubkt8hr0lT0MpkRLyGvSGu-E71DMaA1uvScx8HMGehTlH-qDNtl-sijuoVplPQ4dPdMf0972Par-f0in298_Sn07ldP3dPfbsp6_HVuCf9wLQTdUZFgt6l9QORH6I-4HS-m5ay44zZjA-k_ypq8E579fw64KPpHfIy8BrfMpaC3EOmSj6jjZzcoq-J3qVweow_7ccO_dGH8Pzmy9357nU4R2ZcXi8Q86E_OkC_tHUMmsP_gVaMjRG_Us7VCyCPYWHqWqXkDPy_yKFXjJmAm2q-pnf1tdVVpGeQUeUe5B30hnZCPuDdj_B-ddn5u3iBWLTJC_FBegX9pP3iPpBrS2-hW5JL2gPEJ8wzmtess1kvlLpE-4M9Z5RV2jk8gzy3n5e17-KLyCceDxCLe3xpC5RboA9K20nbjFGQkYovro5muIJHsBOOH6BvgwdN3lT8sLqt44fZ7f8FPz6cvm76pWfkLOrGebyEP_dy1lG-Qx21XMhqiMOIvSn5HPYbYHeY7284BnpMnuHZ32N_BuWCto607eD5MfSprPBBX_MAv-V3-fjEB8fngyLJLxbeB8f43nxwWqY4s0A763t7sqmqm7DOrbyR9px5HWtqrhYW0n-oP0Iecg-mO8pLLTZmjdr6iHgOW9G8Nj-H_bM-Ga1BQ_gPXsdBjBzKctgR6x_rJq7wOZC9AenTjb4vx09jEMbHw0VZ7Z-2K-ecqEkjvgU_LM9T7wI6Z34H8ojrLuwgr-1Mg7vGc9Z9GZedUq5HVocRfUAbXI8Yk-YJcUV_iPJc3R_Tb4zn4U-QUcnkIzk9lNtnbciggHwhz_Q6SVqFNjfws9qSj2lT1hE89LVyF4NCFtFTlP_3sOqvqcbKuMv1NAUb30OXmefqnII_N2A5a6p4k3kUeMmao79WDW7CeLTEWRr5WME6r6Le8zlyHPlgg_WZDsuXGasx9mWugWvlAsMQvPPwsB6h-kA5Up5v0OVJnIMy32L-Rr1OmrXytuwZ9A04_EjfnrMtPFeA3lNS2RbWmTQXbYV6xYgJRFfBKi9jvAVbYWdfLN9z8CAPMlup7x_Rj3Vvxu_WdzN4kNfa2Q8Xt7kc6J1oaXUT9Achn9BTxlyCtUy4_r-dvUA8WcFaLhQDICYq2e_xsO51GY9TzgF6-7oOZRE2TTVI5nzkk_ZF3tk5CdjWAb8P2Kvz0M0bJMxHpWugX-f7urX79shHP_XZT-OROfJunJOIPC979KUWu6n_wzgJeYLqr4XlCOgj8ByJepyozUDPLLdiPUk-nHzlGNlD1rSoO4MyAU0UN7bsnEGG-Fz7apnvObz_7j6f9eNhC31b1MyruIO1pmou2PvGPuCP6n24Xq32Qdvm98H9-X3YmY9qH-wHyh65fRyu9fj-_8ivJ_bye7HYc74Bfbkd4td95RsYn3t_A1vFGCaGTfLwMLbBntuozbCm48-42XkPyxd1Zgv-U-e94HPKyOJmQS-7iGnhG-2MivRDNZD-MFXt0KAfq3iJNeC3WB8yifzQQV-zeYT_j2PvZ-UE8XWZdWrfwvpSqpjE6veaH_vysNqH67_DLpUj9QEMNnCXvRi4XE59gspuqBZoPXXbL_sqwxHzX8DrjfUWcY6CuQntpcW1sH-ZnTUAPu7cxTZmr6ujOo3OjTTOMrBWxmvWC7qwQR42epuQd82jczLud8FzKJ3YzqEI-lxYPKZ_-Ku4-nE86uQx6SyLpLNfNuzN6mYFv_E-fB2qDhpmSXeB6wQ6R38S82wqcO61YYO0pp_jiQ14Zs1ncsjv6dBzfk26Ap3xtrClc1m0hYgjQXPGcy3w2UPPX52FpM6gD-Brfb5e5XrIjKPIL0LpXTdCrdjDSr7p0wPWSRv-CjUT1pU9rM-zUC4QEyyEF_uoHnp_e4j_X_Dw2dhyCF4ESaeOLTFPSf1L7JyW5oetdLDeB30dfATkB3ltBRu4q2aHcU_rg8oF4TvtjI_r78CvqNYFOG7ZuRy8Vx_Meoamc3behvi4cyI43wYdSywXkc5U8QRtlq4RdyF-rGHjzB_49vgch9VI6Z-ho9V5uv83XaEPYq3lf6Yrz_ieJ3kVzgvgbG3Ne9JDeQVzZPTpGJfaeVnFWeopWa8X-F2UlkOp7mk1QMai48jOTdHuMQdWXY3vaf9wfplxofIyxA7ypbCHnaitujfjEdd7ZS1BcRbOqLIGiPqeagHog9TnUFRfUM1BOStrp5In1nOQs8t2wt6azCjnQ3zJXJS1TfWt5bNYQ1Htkb7t_Ix-AvkJZIw6ilp60weo3qm4mz2HEfw_9oa8ALFUs6bJOLg3QJ7j4iHWIXlGjjrj7xkDH9z_vTkV6s6Wa-LsP-sc6vnpXBl7jvW5MjsrZD09f17Ln79V7Z91BPaqzG94WMW9fE_a99r9QHVOwfo8J-sQOlOpM9DAA3TLjlUnKdAjbp7ftTGMn-lneT6CYxD31fO5nhvpT96hPql66r7p09wYxnDubA_tUXVOBTFo2nHn61BDqftFh3MPeLaCc7dgH5tjfI_Y_LL1aK2GjnPBdo5COQhqSbJ7go3v7Wwy6V0iDtVaKfjW6H_prInv2zOfZ0382uWXOhsPn6J4xWDNR53Hf7bP8d_P9bq-f4L-HM8wqbeHHjTPYrXBEw8bOZ_OFTHHbltMI-j7SlWuTlrwHK2HBzTx51vtDCHzK76zc4iu9sI8z_oCjg_sDbF_XI5c_zht4kUf42Ja5Z12RoG5AvWbe4P8HJ67ZS0YY4bs71Xy1YitMJ_11kF31mMRp5WNc1A6D-ptg52Tavw3Ree2EWsrV4Sdoc3iGVAPG_0bq1-pVlP99wNroe6kcwn6nwDPH-ksJ2tP7vySztnZWTDYTS_nDvpYxtve1qBEbG69M9YKmNcSR38PXcHZTF8r_WHN55k8p3hL-ctvP3085n-RMO_8aSwXf0lX8frmqhGPdEbdBPEHfFJB3-f8IOdg3soaWD6FfYN88nzTsfKDjptn-ETWsf5Fjv8iNfKDeAl_gz2FWZpjHvgdzTlszfsB_Abyy6SbwQcPeCaC47hnP8-ParTNGm517cYgh8H_s0Aj_LPrZ_sPGP7-Vv337cXq9ms2vx8-fHnzotfCH8X-9X66XD68fDF--Lqc_PozxuIjD49eHj184R_c1kdv_jjSv8iO3rzCn8yO7D9kR296vJlM77bZ0ZvN1-305dF09ZDPh8UX_vNus9MdpuG_1M5Wd9OJDfvz5dHm9g4jZlx9x7WP_vwv

from satori.

kiwiyou avatar kiwiyou commented on July 23, 2024

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.

steven-tey avatar steven-tey commented on July 23, 2024

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

from satori.

kiwiyou avatar kiwiyou commented on July 23, 2024

@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

    satori/src/satori.ts

    Lines 92 to 93 in 9bc47fd

    cache.clear()
    await preProcessNode(element)
  • satori's global fetching cache
    const inflightRequests = new Map<string, Promise<ResolvedImageData>>()
  • satori updating image size cache only on the first fetch

    satori/src/handler/image.ts

    Lines 226 to 228 in 9bc47fd

    if (inflightRequests.has(src)) {
    return inflightRequests.get(src)
    }

    satori/src/handler/image.ts

    Lines 235 to 271 in 9bc47fd

    const promise = fetch(url)
    .then((res): Promise<string | ArrayBuffer> => {
    const type = res.headers.get('content-type')
    // Handle SVG specially
    if (type === 'image/svg+xml' || type === 'application/svg+xml') {
    return res.text()
    }
    return res.arrayBuffer()
    })
    .then((data) => {
    if (typeof data === 'string') {
    try {
    const newSrc = `data:image/svg+xml;base64,${btoa(data)}`
    // Parse the SVG image size
    const imageSize = parseSvgImageSize(url, data)
    return [newSrc, ...imageSize] as ResolvedImageData
    } catch (e) {
    throw new Error(`Failed to parse SVG image: ${e.message}`)
    }
    }
    const [newSrc, imageSize] = arrayBufferToDataUri(data)
    return [newSrc, ...imageSize] as ResolvedImageData
    })
    .then((result) => {
    cache.set(url, result)
    return result
    })
    .catch((err) => {
    console.error(`Can't load image ${url}: ` + err.message)
    cache.set(url, [])
    return [] as const
    })
    inflightRequests.set(url, promise)

from satori.

kiwiyou avatar kiwiyou commented on July 23, 2024

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.

fonstack avatar fonstack commented on July 23, 2024

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.

kiwiyou avatar kiwiyou commented on July 23, 2024

@fonstack Your problem should be fixed in #596.

from satori.

fonstack avatar fonstack commented on July 23, 2024

@fonstack Your problem should be fixed in #596.

thanks! any estimated time for the merge of the PR? @kiwiyou

from satori.

kiwiyou avatar kiwiyou commented on July 23, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.