feat: add background prop

package.json

@@ -25,7 +25,7 @@
     "defu": "^3.2.2",
     "hasha": "^5.2.2",
     "image-meta": "^0.0.1",
-    "ipx": "^0.4.3",
+    "ipx": "^0.4.4",
     "is-https": "^2.0.2",
     "node-fetch": "^2.6.1",
     "requrl": "^2.0.1",

src/providers/cloudinary/runtime.ts

@@ -7,7 +7,8 @@ const operationsGenerator = createOperationsGenerator({
     width: 'w',
     height: 'h',
     format: 'f',
-    quality: 'q'
+    quality: 'q',
+    background: 'b'
   },
   valueMap: {
     fit: {

src/providers/local/runtime.ts

@@ -1,28 +1,35 @@
 import { RuntimeProvider, ImageModifiers } from 'types'
-import { isRemoteUrl } from '~image/utils'
+import { createOperationsGenerator, isRemoteUrl } from '~image/utils'
+
+const operationsGenerator = createOperationsGenerator({
+  keyMap: {
+    fit: 'f',
+    width: 'w',
+    height: 'h',
+    resize: 's',
+    quality: 'q',
+    background: 'b'
+  },
+  joinWith: ',',
+  formatter: (key, value) => `${key}_${value}`
+})
 
 export default <RuntimeProvider> {
   getImage (src: string, modifiers: ImageModifiers, options: any) {
-    const operations = []
+    const format = modifiers.format || '_'
+    delete modifiers.format
 
-    const fit = modifiers.fit ? `_${modifiers.fit}` : ''
     if (modifiers.width && modifiers.height) {
-      operations.push(`s_${modifiers.width}_${modifiers.height}${fit}`)
-    } else if (modifiers.width) {
-      operations.push(`w_${modifiers.width}${fit}`)
-    } else if (modifiers.height) {
-      operations.push(`h_${modifiers.height}${fit}`)
-    }
-    if (modifiers.quality) {
-      operations.push(`q_${modifiers.quality}`)
+      modifiers.resize = `${modifiers.width}_${modifiers.height}`
+      delete modifiers.width
+      delete modifiers.height
     }
-
     src = isRemoteUrl(src) ? src : (options.baseURL || '') + src
 
-    const operationsString = operations.join(',') || '_'
+    const operationsString = operationsGenerator(modifiers) || '_'
 
     return {
-      url: `/_image/local/remote/${modifiers.format || '_'}/${operationsString}/${src}`,
+      url: `/_image/local/remote/${format}/${operationsString}/${src}`,
       isStatic: true
     }
   }

src/runtime/nuxt-img.ts

@@ -34,6 +34,10 @@ export const props = {
     type: [Number, String],
     default: null
   },
+  background: {
+    type: String,
+    default: null
+  },
   fit: {
     type: String,
     default: null
@@ -144,6 +148,7 @@ export default {
         fit: this.fit,
         quality: this.quality,
         format: this.format,
+        background: this.background,
         ...this.operations
       }
     },

src/runtime/nuxt-picture.ts

@@ -90,6 +90,7 @@ export default {
       return {
         fit: this.fit,
         quality: this.quality,
+        background: this.background,
         ...this.operations
       }
     },

types/runtime.d.ts

@@ -86,7 +86,7 @@ export interface RuntimePlaceholder extends RuntimeImageInfo {
 
 export type RuntimeOperationFormatter = (key: string, value: string) => string
 
-export type RuntimeOperationMapper = { [key: string]: string } | ((key: string) => string)
+export type RuntimeOperationMapper = { [key: string]: string | false } | ((key: string) => string)
 
 export interface OperationGeneratorConfig {
   keyMap?: RuntimeOperationMapper

yarn.lock

@@ -6528,10 +6528,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
   integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
 
-ipx@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/ipx/-/ipx-0.4.3.tgz#0ae7f4c070fd733981fd42e5645c0ec07ec50945"
-  integrity sha512-wadRjiA9T5/5z2VQbB4Lq4Kyhkhz/oniWV6kP1TnHgGNn2gjSWaufeBhGZ3WMMmIoYARxBEgX6Th4jkDDbMHAw==
+ipx@^0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/ipx/-/ipx-0.4.4.tgz#a6fd16c332da9e6b0a06e49effd43359f385d383"
+  integrity sha512-iHXb2MrDpm4F+tWJ/9/AqyHJttvwEJispzMM2/bFBE/jVeVqO0EXuvNAEFqFsnrWbAdAC8xZOSRaR5xHOhg2HQ==
   dependencies:
     connect "^3.7.0"
     consola "^2.15.0"