fix: image text options

Author: pengzhanbo

README.md

@@ -186,14 +186,14 @@ export interface ImagePlaceholderOptions {
    *
    * 或者传入一组颜色数组，将会随机选择任意颜色作为默认背景色
    *
-   * @default '#ccc'
+   * @default '#efefef'
    *
    */
   background?: string | string[]
   /**
    * 文本默认颜色， `Hex` 或者 `RGB` 格式的值
    *
-   * @default '#333'
+   * @default '#666'
    */
   textColor?: string
   /**

example/index.html

@@ -24,17 +24,17 @@
   <img src="/image/placeholder/text/人生如梦.png" alt="">
   <img src="/image/placeholder/bg/00ffcc/text/youcan.webp" alt="">
   <img src="/image/placeholder/text/i can/bg/ccffcc.jpeg" alt="">
-  <img src="/image/placeholder/text/人生如梦/300/200?noise=1&textColor=red" alt="">
-  <img src="/image/placeholder/text/人生如梦/300/200?noise=1&textColor=255,255,255" alt="">
-  <img src="/image/placeholder/text/人生如梦/300/200?noise=1&textColor=rgb(110,110,110,0.2)" alt="">
-  <img src="/image/placeholder/text/人生如梦/300/200?noise=1&textColor=255,255,255,.8" alt="">
+  <img src="/image/placeholder/text/人生如梦red/textColor/255,0,0/300/200?noise=1" alt="">
+  <img src="/image/placeholder/text/人生如梦/textColor/255,255,255/300/200?noise=1" alt="">
+  <img src="/image/placeholder/text/人生如梦/textColor/rgb(110,110,110,0.2)/300/200?noise=1" alt="">
+  <img src="/image/placeholder/text/人生如梦/textColor/255,255,255,.8/300/200?noise=1" alt="">
   <img src="/image/placeholder/text/gif/300.gif" alt="">
   <img src="/image/placeholder/text/webp/300.webp" alt="">
   <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="">
-  <img src="/image/placeholder/text/image-placeholder/bg/09c.svg?textColor=fff" alt="">
+  <img src="/image/placeholder/text/image-placeholder/bg/09c/c/fff.svg" alt="">
   <script type="module" src="./main.ts"></script>
 </body>
 </html>

src/pathToImage.ts

@@ -63,6 +63,7 @@ export async function pathToImage(
   const textOptions: TextOptions = {
     dpi: Math.floor((Math.min(width, height) / 4) * 3) || 1,
     text: params.text || options.text || `${width}x${height}`,
+    font: 'Menlo, Monaco, "Courier New", monospace',
     rgba: true,
   }
 

src/plugin.ts

@@ -15,8 +15,8 @@ export const parseOptions = (
   options = Object.assign(
     {
       prefix: 'image/placeholder',
-      background: '#ccc',
-      textColor: '#333',
+      background: '#efefef',
+      textColor: '#666',
       width: 300,
       type: 'png',
       quality: 80,

src/utils.ts

@@ -45,7 +45,7 @@ export const formatColor = (
 }
 
 export const formatText = (text: string, color: string) => {
-  return `<span font-family="monospace" foreground="${color}">${text}</span>`
+  return `<span foreground="${color}">${text}</span>`
 }
 
 export const getMimeType = (type: ImageType = 'png'): string => {