feat: upgrade resvg to ^2.6.0 & refine mask-image

package.json

@@ -79,7 +79,7 @@
   "homepage": "https://github.com/vercel/satori#readme",
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.4.2",
-    "@resvg/resvg-js": "^2.1.0",
+    "@resvg/resvg-js": "^2.6.0",
     "@types/node": "^16",
     "@types/opentype.js": "^1.3.3",
     "@types/react": "^17.0.38",

src/builder/background-image.ts

@@ -161,17 +161,6 @@ function normalizeStops(
     }
   }
 
-  if (from === 'mask') {
-    return stops.map((stop) => {
-      const color = cssColorParse(stop.color)
-      if (color.alpha === 0) {
-        return { ...stop, color: `rgba(0, 0, 0, 1)` }
-      } else {
-        return { ...stop, color: `rgba(255, 255, 255, ${color.alpha})` }
-      }
-    })
-  }
-
   return stops
 }
 
@@ -452,14 +441,8 @@ export default async function backgroundImage(
     const [src, imageWidth, imageHeight] = await resolveImageData(
       image.slice(4, -1)
     )
-    const resolvedWidth =
-      from === 'mask'
-        ? imageWidth || dimensionsWithoutFallback[0]
-        : dimensionsWithoutFallback[0] || imageWidth
-    const resolvedHeight =
-      from === 'mask'
-        ? imageHeight || dimensionsWithoutFallback[1]
-        : dimensionsWithoutFallback[1] || imageHeight
+    const resolvedWidth = dimensionsWithoutFallback[0] || imageWidth
+    const resolvedHeight = dimensionsWithoutFallback[1] || imageHeight
 
     return [
       `satori_bi${id}`,

src/builder/mask-image.ts

@@ -1,6 +1,6 @@
 import { buildXMLString } from '../utils.js'
 import buildBackgroundImage from './background-image.js'
-import type { MaskProperty } from '../parser/mask.js'
+import type { MaskParsedRes } from '../parser/mask.js'
 
 const genMaskImageId = (id: string) => `satori_mi-${id}`
 
@@ -16,16 +16,19 @@ export default async function buildMaskImage(
   inheritedStyle: Record<string, string | number>
 ): Promise<[string, string]> {
   if (!style.maskImage) return ['', '']
+
   const { left, top, width, height, id } = v
-  const maskImage = style.maskImage as unknown as MaskProperty[]
-  const length = maskImage.length
+  const maskImage = style.maskImage as unknown as MaskParsedRes
+  const images = maskImage.detail
+  const length = images.length
+
   if (!length) return ['', '']
-  const miId = genMaskImageId(id)
 
+  const miId = genMaskImageId(id)
   let mask = ''
 
   for (let i = 0; i < length; i++) {
-    const m = maskImage[i]
+    const m = images[i]
 
     const [_id, def] = await buildBackgroundImage(
       { id: `${miId}-${i}`, left, top, width, height },
@@ -45,7 +48,16 @@ export default async function buildMaskImage(
       })
   }
 
-  mask = buildXMLString('mask', { id: miId }, mask)
+  mask = buildXMLString(
+    'mask',
+    {
+      id: miId,
+      // FIXME: although mask-type's default value is luminance, but we can get the same result with what browser renders unless
+      // i set mask-type with alpha
+      'mask-type': maskImage.type,
+    },
+    mask
+  )
 
   return [miId, mask]
 }

src/handler/expand.ts

@@ -13,7 +13,7 @@ import parseTransformOrigin, {
   ParsedTransformOrigin,
 } from '../transform-origin.js'
 import { isString, lengthToNumber, v, splitEffects } from '../utils.js'
-import { MaskProperty, parseMask } from '../parser/mask.js'
+import { MaskParsedRes, parseMask } from '../parser/mask.js'
 import { FontWeight, FontStyle } from '../font.js'
 
 // https://react-cn.github.io/react/tips/style-props-value-px.html
@@ -227,7 +227,7 @@ type MainStyle = {
   color: string
   fontSize: number
   transformOrigin: ParsedTransformOrigin
-  maskImage: MaskProperty[]
+  maskImage: MaskParsedRes
   opacity: number
   textTransform: string
   whiteSpace: string

src/parser/mask.ts

@@ -3,7 +3,9 @@ import { splitEffects } from '../utils.js'
 
 function getMaskProperty(style: Record<string, string | number>, name: string) {
   const key = getPropertyName(`mask-${name}`)
-  return (style[key] || style[`WebkitM${key.substring(1)}`]) as string
+  return (
+    (style[key] || style[`WebkitM${key.substring(1)}`] || '') as string
+  ).split(',')
 }
 
 export interface MaskProperty {
@@ -13,25 +15,53 @@ export interface MaskProperty {
   repeat: string
   origin: string
   clip: string
+  mode: string
+}
+
+export interface MaskParsedRes {
+  type: string
+  detail: MaskProperty[]
 }
 
 export function parseMask(
   style: Record<string, string | number>
-): MaskProperty[] {
+): MaskParsedRes {
   const maskImage = (style.maskImage || style.WebkitMaskImage) as string
 
   const common = {
-    position: getMaskProperty(style, 'position') || '0% 0%',
-    size: getMaskProperty(style, 'size') || '100% 100%',
-    repeat: getMaskProperty(style, 'repeat') || 'repeat',
-    origin: getMaskProperty(style, 'origin') || 'border-box',
-    clip: getMaskProperty(style, 'origin') || 'border-box',
+    position: getMaskProperty(style, 'position'),
+    size: getMaskProperty(style, 'size'),
+    repeat: getMaskProperty(style, 'repeat'),
+    origin: getMaskProperty(style, 'origin'),
+    clip: getMaskProperty(style, 'origin'),
+    mode: getMaskProperty(style, 'mode'),
   }
 
-  let maskImages = splitEffects(maskImage).filter((v) => v && v !== 'none')
+  const images = splitEffects(maskImage).filter((v) => v && v !== 'none')
+
+  const result = []
 
-  return maskImages.reverse().map((m) => ({
-    image: m,
-    ...common,
-  }))
+  for (let i = 0, n = images.length; i < n; i++) {
+    result[i] = {
+      image: images[i],
+      position: common.position[i] || '0% 0%',
+      size: common.size[i] || '',
+      repeat: common.repeat[i] || 'repeat',
+      origin: common.origin[i] || 'border-box',
+      clip: common.clip[i] || 'border-box',
+      // https://drafts.fxtf.org/css-masking/#the-mask-mode
+      // match-source(default), alpha, luminance
+      // image -> alpha:
+      // 1. url()
+      // 2.gradient
+      // mask-source -> luminance(e.g url(mask#id))
+      // we do rarely use mask-source in satori, so here we just set alpha by default
+      mode: common.mode[i] || 'alpha',
+    }
+  }
+
+  return {
+    type: (getMaskProperty(style, 'type')[0] || 'alpha') as string,
+    detail: result,
+  }
 }

test/mask-image.test.tsx

@@ -209,4 +209,29 @@ describe('Mask-*', () => {
     )
     expect(toImage(svg, 100)).toMatchImageSnapshot()
   })
+
+  it('should render correctly with real image as mask-image', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: 32,
+          fontWeight: 600,
+          background: 'red',
+          maskImage:
+            'url(https://fxbssdl.kgimg.com/bss/fxams/f2846cbe8d1c89ce84191b5c05ce1df9.png)',
+          maskSize: '50px 50px',
+          maskRepeat: 'no-repeat', // just for reference in html
+        }}
+      ></div>,
+      { width: 100, height: 100, fonts }
+    )
+
+    expect(toImage(svg, 100)).toMatchImageSnapshot()
+  })
 })