提供商

ImageKit

来源
Nuxt Image 与 ImageKit 有着紧密的集成。

ImageKit 与图片模块之间的集成。

要使用 ImageKit 提供商，您需要将 ImageKit 帐户的 URL 端点设置为如下所示的基准 URL。

nuxt.config.ts
export default defineNuxtConfig({
  image: {
    imagekit: {
      baseURL: 'https://ik.imagekit.io/your_imagekit_id'
    }
  }
})

您可以在 ImageKit 仪表盘中获取 URL 端点 - https://imagekit.io/dashboard#url-endpoints。

ImageKit fit 参数

除了 Nuxt Image 和 Nuxt Picture 的标准 fit 属性外，ImageKit 还为用户提供了更多裁剪和调整大小选项

  • extract - 输出图片的高度和宽度与请求一致，并保留纵横比。与 cover 参数不同，我们会从原始图片中提取一个指定尺寸的区域。
  • pad_extract - 此参数类似于 extract。它在我们需要从较小的图片中提取较大尺寸的图片时非常有用。因此，pad_extract 模式会在图片周围添加实色填充以匹配请求的精确尺寸。

阅读 ImageKit 的 裁剪和裁剪模式文档 以获取更多详细信息和工作原理示例。

ImageKit 修饰符

除了标准的 Nuxt Image 修饰符 外，用户还可以利用 modifier 属性中提供的 ImageKit 特定转换参数。

focus

此参数可与调整大小和裁剪一起使用，以关注图片的所需部分。您可以使用诸如 left、right、top、bottom、center、top、left、bottom、right、top_left、top_right、bottom_left 和 bottom_right 的焦点参数值。

还可以使用自定义坐标通过参数值 custom 来聚焦。从 示例 中了解更多。

此外，ImageKit 还提供智能裁剪，它可以使用 auto 自动检测图片中最重要的部分。并且，可以使用 face 来查找图片中的脸部（或多张脸部），并将其作为焦点。

查看 ImageKit 关于 焦点 的文档以了解更多信息。

blur

这可以用于模糊图片。使用修饰符 blur 指定要应用于图片的高斯模糊半径。可能的值包括 1 到 100 之间的整数。

<NuxtImg
  provider="imagekit"
  src="/default-image.jpg"
  :modifiers="{blur: 10}"
/>

effectGray

使用 effectGray 修饰符将图片转换为灰度版本。

<NuxtImg
  provider="imagekit"
  src="/default-image.jpg"
  height="300"
  :modifiers="{effectGray: true}"
/>

named

使用 命名转换 作为整个转换字符串的别名。

例如，我们可以为转换字符串创建名为 media_library_thumbnail 的命名转换 - tr:w-100,h-100,c-at_max,fo-auto。

border

使用 border 修饰符为图片添加边框。您还可以设置其宽度和颜色。

<NuxtImg
  provider="imagekit"
  src="/default-image.jpg"
  width="300"
  :modifiers="{border: '20_FF0000'}"
/>

rotate

使用 rotate 修饰符旋转图片。可能的值为 - 0、90、180、270、360 和 auto。

<NuxtImg
  provider="imagekit"
  src="/default-image.jpg"
  :modifiers="{rotate: 90}"
/>

radius

使用 radius 为图片添加圆角。可能的值为 - 正整数和 max。

<NuxtImg
  provider="imagekit"
  src="/default-image.jpg"
  :modifiers="{radius: 20}"
/>

bg

使用 bg 修饰符为图片指定背景颜色及其不透明度。

<NuxtImg
  provider="imagekit"
  src="/default-image.jpg"
  height="1200"
  width="1200"
  fit="pad_extract"
  :modifiers="{bg: '272B38'}"
/>

阅读有关 ImageKit 裁剪、调整大小和其他常见转换的更多信息 此处。

叠加转换修饰符

ImageKit 的 Nuxt Image 集成使您能够使用 raw 参数和 图层 概念，将叠加层应用于 图片。raw 参数有助于直接在 URL 中包含转换。图层是一种特殊的转换类型，允许您应用文本和图片叠加层以及其他转换参数。

叠加图片

在另一张图片（基准图片）上叠加一张图片。您可以使用它来创建动态横幅、水印等。

<NuxtImg
  provider="imagekit"
  src="/default-image.jpg"
  :modifiers="modifiers"
  />

<script>
  export default {
    data() {
      return {
        modifiers: {
          raw: 'l-image,i-default-image.jpg,w-300,h-200,b-5_FFFFFF,fo-top_left,l-end'
        }
      }
    }
  }
</script>

叠加文本

您可以在图片上叠加文本并根据需要对其应用各种转换。

<NuxtImg
  provider="imagekit"
  src="/default-image.jpg"
  :modifiers="modifiers"
/>

<script>
  export default {
    data() {
      return {
        modifiers: {
          raw: 'l-text,i-overlay made easy,fs-45,co-000000,bg-FFFFFF80,r-30,pa-40,l-end'
        }
      }
    }
  }
</script>

阅读有关 ImageKit 使用图层进行叠加的更多信息 此处。

图片增强修饰符

effectContrast

使用 effectContrast 修饰符增强图片对比度。

<NuxtImg
  provider="imagekit"
  src="/default-image.jpg"
  height="300"
  :modifiers="{effectContrast: true}"
/>

effectSharpen

使用 effectSharpen 修饰符锐化输入图片。

<NuxtImg
  provider="imagekit"
  src="/default-image.jpg"
  height="300"
  :modifiers="{effectSharpen: 10}"
/>

支持的转换列表

ImageKit 的 Nuxt Image 集成为每个转换参数提供了一个易于记忆的名称。它使您的代码更具可读性。如果您使用与以下支持选项不匹配的属性，则会原样将其添加到 URL 中。

支持的参数名称转换为参数
bgbg
aspectRatioar
xx
yy
xcxc
ycyc
oixoix
oiyoiy
oixcoixc
oiycoiyc
cropc
cropModecm
focusfo
radiusr
borderb
rotatert
blurbl
namedn
progressivepr
losslesslo
trimt
metadatamd
colorProfilecp
defaultImagedi
dprdpr
effectSharpene-sharpen
effectUSMe-usm
effectContraste-contrast
effectGraye-grayscale
originalorig

从官方文档中了解有关 ImageKit 的图片转换 的更多信息。

ImageEngine

Nuxt Image 与 ImageEngine 有着紧密的集成。

Imgix

Nuxt Image 与 Imgix 有着紧密的集成。