feat: add svg support

example/index.html

@@ -33,6 +33,7 @@
   <img src="/image/placeholder/text/avif/300.avif" alt="">
   <img src="/image/placeholder/text/heif/300.heif" alt="">
   <img src="/image/placeholder/1.gif" alt="">
+  <img src="/image/placeholder/text/svg/300.svg" alt="">
   <script type="module" src="./main.ts"></script>
 </body>
 </html>

example/main.ts

@@ -1,11 +1,16 @@
 import './index.css'
 
 import placeholder from 'virtual:image/placeholder/text/import'
+import svg from 'virtual:image/placeholder/text/svg+xml.svg'
 
 const img = new Image()
 img.src = placeholder
 
+const imgSvg = new Image()
+imgSvg.src = svg
+
 document.body.appendChild(img)
+document.body.appendChild(imgSvg)
 
 const img1 = new Image()
 img1.src = '/image/placeholder'

src/constants.ts

@@ -15,4 +15,5 @@ export const imageMimeType = {
   avif: 'image/avif',
   heif: 'image/heif',
   gif: 'image/gif',
+  svg: 'image/svg+xml',
 }

src/pathToImage.ts

@@ -64,10 +64,7 @@ export async function pathToImage(
 
   const textOptions: TextOptions = {
     dpi: Math.floor((Math.min(width, height) / 4) * 3) || 1,
-    text: formatText(
-      params.text || options.text || `${width}x${height}`,
-      formatColor(query.textColor, true) || options.textColor,
-    ),
+    text: params.text || options.text || `${width}x${height}`,
     rgba: true,
   }
 
@@ -78,6 +75,7 @@ export async function pathToImage(
       text: textOptions,
       quality: options.quality,
       compressionLevel: options.compressionLevel,
+      textColor: formatColor(query.textColor, true) || options.textColor,
     })
     const result: ImageCacheItem = {
       type: imgType,
@@ -96,16 +94,23 @@ export async function createImage({
   text,
   quality,
   compressionLevel,
+  textColor,
 }: {
   type: ImageType
   create: CreateOptions
   text: TextOptions
   quality: number
   compressionLevel: number
+  textColor: string
 }) {
+  if (type === 'svg') {
+    return createSVG(create, text.text, textColor)
+  }
   let image = sharp({ create })
 
-  text && image.composite([{ input: { text } }])
+  text.text = formatText(text.text, textColor)
+
+  image.composite([{ input: { text } }])
 
   switch (type) {
     case 'jpg':
@@ -132,3 +137,17 @@ export async function createImage({
 
   return buf
 }
+
+export function createSVG(
+  create: CreateOptions,
+  text: string,
+  textColor: string,
+) {
+  const { width, height, background } = create
+  const fs = Math.floor(Math.min(width, height) / 8)
+  const mw = Math.floor(width / 2)
+  const mh = Math.floor(height / 2 + fs / 4)
+  const svg = `<svg version="1.1" baseProfile="full" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="${background}" /><text font-family="monospace" x="${mw}" y="${mh}" font-size="${fs}" text-anchor="middle" fill="${textColor}">${text}</text></svg>`
+  const buffer = Buffer.from(svg, 'utf-8')
+  return buffer
+}

src/types.ts

@@ -52,7 +52,7 @@ export interface ImagePlaceholderOptions {
   /**
    * 图片宽高比，当未明确指定高度时，高度将根据 ratio 计算
    *
-   * @default 3/4
+   * @default 9/16
    */
   ratio?: number
   /**
@@ -83,6 +83,7 @@ export type ImageType =
   | 'avif'
   | 'heif'
   | 'gif'
+  | 'svg'
 
 export interface ImagePlaceholderParams {
   width?: number