feat: 支持在html/js/css资源中内联占位图片

pengzhanbo · Jan 10, 2023 · f2f2c3a · f2f2c3a
1 parent f929fef
commit f2f2c3a
Show file tree

Hide file tree

Showing 14 changed files with 208 additions and 44 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-  "cSpell.words": ["middlewares"]
+  "cSpell.words": ["libvips", "middlewares", "npmrc"]
 }
diff --git a/README.md b/README.md
@@ -6,13 +6,11 @@
 
 ## 安装
 
-> 还未正式发布到 npm
-
 ```sh
 npm i -D vite-plugin-image-placeholder
 ```
 
-由于插件以来 `sharp` 库生成图片资源。`sharp`在安装过程中依赖 `libvips`，在中国地区安装可能失败。
+由于插件依赖 `sharp` 库生成图片资源。`sharp`在安装过程中依赖 `libvips`，在中国地区安装可能失败。
 
 解决方式是，在 项目的根目录中的 `.npmrc` 文件中，写入以下配置：
 
@@ -70,5 +68,4 @@ const rules = [
 
 - [x] 开发时为 `GET` 请求的生成图片
 - [x] 通过模块引入的资源生成图片资源
-- [ ] 在 HTML/CSS 中引入的占位图片资源替换为base64
-- [ ] 在 js 中通过 字符串引入的资源替换为 base64
+- [x] 在 HTML/CSS 中引入的占位图片资源替换为base64
diff --git a/example/index.css b/example/index.css
@@ -0,0 +1,6 @@
+.img {
+  width: 300px;
+  height: 169px;
+  background: url('/image/placeholder') no-repeat;
+  background-size: cover;
+}
diff --git a/example/index.html b/example/index.html
@@ -7,6 +7,7 @@
   <title>Mock Server Example</title>
 </head>
 <body>
+  <div class="img"></div>
   <img src="/image/placeholder" alt="">
   <img src="/image/placeholder/200" alt="">
   <img src="/image/placeholder/300/200" alt="">

diff --git a/example/main.ts b/example/main.ts
@@ -1,6 +1,17 @@
-import placeholder from 'virtual:image/placeholder'
+import './index.css'
+
+import placeholder from 'virtual:image/placeholder/text/import'
 
 const img = new Image()
 img.src = placeholder
 
 document.body.appendChild(img)
+
+const img1 = new Image()
+img1.src = '/image/placeholder'
+
+const img2 = new Image()
+img2.src = '/image/placeholder/text/ssss2'
+
+document.body.appendChild(img1)
+document.body.appendChild(img2)
diff --git a/example/vite.config.ts b/example/vite.config.ts
@@ -2,5 +2,5 @@ import { defineConfig } from 'vite'
 import imagePlaceholder from '../src/index'
 
 export default defineConfig(() => ({
-  plugins: [imagePlaceholder()],
+  plugins: [imagePlaceholder({ inline: false })],
 }))
diff --git a/package.json b/package.json
@@ -9,6 +9,10 @@
     "placeholder",
     "image-placeholder"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pengzhanbo/vite-plugin-image-placeholder"
+  },
   "license": "GPL-3.0",
   "author": "pengzhanbo <[email protected]> (https://github.com/pengzhanbo)",
   "type": "module",
@@ -39,6 +43,7 @@
   "dependencies": {
     "debug": "^4.3.4",
     "lru-cache": "^7.14.1",
+    "magic-string": "^0.27.0",
     "path-to-regexp": "^6.2.1",
     "rgb-hex": "^4.0.0",
     "sharp": "^0.31.3"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/index.ts b/src/index.ts
@@ -1,5 +1,16 @@
 import { imagePlaceholderPlugin } from './plugin'
+import type {
+  ImagePlaceholderOptions,
+  ImagePlaceholderParams,
+  ImagePlaceholderQuery,
+} from './types'
 
 export { imagePlaceholderPlugin }
 
+export type {
+  ImagePlaceholderOptions,
+  ImagePlaceholderParams,
+  ImagePlaceholderQuery,
+}
+
 export default imagePlaceholderPlugin
diff --git a/src/pathRules.ts b/src/pathRules.ts
@@ -1,10 +1,9 @@
 export function generatePathRules(prefix: string) {
   return [
-    '',
-    '/:width?/:height?{.:type}?',
-    '/bg/:background/:width?/:height?{.:type}?',
-    '/text/:text/:width?/:height?{.:type}?',
-    '/text/:text/bg/:background/:width?/:height?{.:type}?',
     '/bg/:background/text/:text/:width?/:height?{.:type}?',
+    '/text/:text/bg/:background/:width?/:height?{.:type}?',
+    '/text/:text/:width?/:height?{.:type}?',
+    '/bg/:background/:width?/:height?{.:type}?',
+    '/:width?/:height?{.:type}?',
   ].map((_) => `${prefix}${_}`)
 }
diff --git a/src/pathToImage.ts b/src/pathToImage.ts
@@ -32,7 +32,6 @@ export async function pathToImage(
   })
 
   if (!rule) return
-
   const urlMatch = match(rule, { decode: decodeURIComponent })(pathname!) || {
     params: {
       width: options.width,
@@ -72,7 +71,13 @@ export async function pathToImage(
     rgba: true,
   }
 
-  const imgBuf = await createImage(imgType, createOptions, textOptions)
+  const imgBuf = await createImage({
+    type: imgType,
+    create: createOptions,
+    text: textOptions,
+    quality: options.quality,
+    compressionLevel: options.compressionLevel,
+  })
   const result: ImageCacheItem = {
     type: imgType,
     buffer: imgBuf,
@@ -81,34 +86,42 @@ export async function pathToImage(
   return result
 }
 
-export async function createImage(
-  type: ImageType = 'png',
-  createOptions: CreateOptions,
-  textOptions?: TextOptions,
-) {
-  let image = sharp({ create: createOptions })
+export async function createImage({
+  type = 'png',
+  create,
+  text,
+  quality,
+  compressionLevel,
+}: {
+  type: ImageType
+  create: CreateOptions
+  text: TextOptions
+  quality: number
+  compressionLevel: number
+}) {
+  let image = sharp({ create })
 
-  textOptions && image.composite([{ input: { text: textOptions } }])
+  text && image.composite([{ input: { text } }])
 
   switch (type) {
     case 'jpg':
     case 'jpeg':
-      image = image.jpeg({ quality: 100 })
+      image = image.jpeg({ quality })
       break
     case 'webp':
-      image = image.webp({ quality: 100 })
+      image = image.webp({ quality })
       break
     case 'heif':
-      image = image.heif({ quality: 100 })
+      image = image.heif({ quality })
       break
     case 'avif':
-      image = image.avif({ quality: 100 })
+      image = image.avif({ quality })
       break
     case 'gif':
       image = image.gif()
       break
     default:
-      image = image.png({ compressionLevel: 1 })
+      image = image.png({ compressionLevel })
   }
 
   const buf = await image.toBuffer()