Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: positioned mask image #566

Merged
merged 3 commits into from
Jan 30, 2024
Merged

fix: positioned mask image #566

merged 3 commits into from
Jan 30, 2024

Conversation

pjeweb
Copy link
Contributor

@pjeweb pjeweb commented Oct 18, 2023

Resolves #565

@pjeweb pjeweb requested a review from shuding as a code owner October 18, 2023 22:03
@vercel
Copy link

vercel bot commented Oct 18, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
satori-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 30, 2024 1:20am

@pjeweb pjeweb changed the title main fix positioned mask image Oct 18, 2023
@pjeweb pjeweb changed the title fix positioned mask image fix: positioned mask image Oct 18, 2023
@chopfitzroy
Copy link

Is it possible to apply this as a patch locally?

@pjeweb
Copy link
Contributor Author

pjeweb commented Nov 16, 2023

Is it possible to apply this as a patch locally?

Yes! We patched it with the following for next 13 which bundles satori. But you should be able to do the same outside of next or in next 14 etc.:

diff --git a/dist/compiled/@vercel/og/index.edge.js b/dist/compiled/@vercel/og/index.edge.js
index 1f7fc5b22388f95e2b6570f2c1fc0ccbd66754ba..6e981667a4cc7f810903279d219db76eb816e06e 100644
--- a/dist/compiled/@vercel/og/index.edge.js
+++ b/dist/compiled/@vercel/og/index.edge.js
@@ -16086,7 +16086,7 @@ async function zn(e, t, n) {
   let f = $f(s), c = "";
   for (let p = 0; p < l; p++) {
     let h = a[p], [d, m] = await Nt({ id: `${f}-${p}`, left: r, top: i, width: o, height: u }, h, n, "mask");
-    c += m + C("rect", { x: 0, y: 0, width: o, height: u, fill: `url(#${d})` });
+    c += m + C("rect", { x: r, y: i, width: o, height: u, fill: `url(#${d})` });
   }
   return c = C("mask", { id: f }, c), [f, c];
 }
diff --git a/dist/compiled/@vercel/og/index.node.js b/dist/compiled/@vercel/og/index.node.js
index 55c7d94015b8ef43244fa1a45c7c479fd65bc06b..265d188776f47c5859e51dccdc341c7d4622b953 100644
--- a/dist/compiled/@vercel/og/index.node.js
+++ b/dist/compiled/@vercel/og/index.node.js
@@ -16086,7 +16086,7 @@ async function zn(e, t, n) {
   let f = $f(s), c = "";
   for (let p = 0; p < l; p++) {
     let h = a[p], [d, m] = await Nt({ id: `${f}-${p}`, left: r, top: i, width: o, height: u }, h, n, "mask");
-    c += m + C("rect", { x: 0, y: 0, width: o, height: u, fill: `url(#${d})` });
+    c += m + C("rect", { x: r, y: i, width: o, height: u, fill: `url(#${d})` });
   }
   return c = C("mask", { id: f }, c), [f, c];
 }

(we used pnpm for the patch, but yarn or patch-package should work too)

@shuding
Copy link
Member

shuding commented Jan 30, 2024

Thanks!

@shuding shuding merged commit 9bc47fd into vercel:main Jan 30, 2024
10 checks passed
Copy link

🎉 This PR is included in version 0.10.13 🎉

The release is available on:

Your semantic-release bot 📦🚀

sahithyandev pushed a commit to sahithyandev/satori that referenced this pull request Apr 26, 2024
Resolves vercel#565

---------

Co-authored-by: Shu Ding <g@shud.in>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Mask image always applied to root instead of element
3 participants