Twicpics - Nuxt 图片提供商

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

什么是 TwicPics？

Twicpics 是一种响应式图片服务解决方案（SaaS），它支持按需响应式图片生成。

使用 Twicpics 提供商，您可以开箱即用地从以下方面获益：

我们网络的性能：全球 CDN、优化协议和竞争性缓存
理想压缩：现代技术和下一代格式（Twicpics 原生提供 WebP 以供支持的浏览器使用，也可以提供 avif）

使用 Twicpics API，您可以访问所有这些功能：使用 Twicpics focus auto 智能裁剪、真彩色、翻转、旋转、裁剪、缩放。

要求

唯一的要求是拥有 Twicpics 帐户。如果您还没有帐户，可以轻松地免费创建自己的 Twicpics 帐户。

设置

您只需要将 TwicPics 提供商配置为 baseURL 设置为您的 Twicpics 域名。

nuxt.config.ts

export default defineNuxtConfig({
  image: {
    twicpics: {
      baseURL: 'https://<your-twicpics-domain>/'
      // Feel free to use our demo domain to try the following examples.
      // baseUrl: 'https://demo.twic.pics/'
    }
  }
})

标准属性

Twicpics 提供商符合 nuxt-img 和 nuxt-picture 的文档。

fit

fit 决定图片相对于 height 和 width 参数的大小调整方式。

Twicpics 提供商支持 Nuxt 图片和 Nuxt 图片的所有标准 fit 属性值。

语法：fit='__cover__'（默认值）

这将返回您主图片的变体，裁剪为 300x300，同时保持纵横比。

<NuxtImg
  provider="twicpics"
  src="/football.jpg"
  height=300
  width=300
/>

这将返回您主图片的变体，调整大小为 300x300，存在失真。

<NuxtImg
  provider="twicpics"
  src="/football.jpg"
  fit="resize"
  height=300
  width=300
/>

这将根据比率（1:1）使用信箱将您的图片带回到 300x600 区域。

<NuxtImg
  provider="twicpics"
  src="/cat_1x1.jpg"
  fit="contain"
  height=600
  width=300
/>

信箱是透明区域。您可以随意使用 background 属性选择您喜欢的颜色。

<NuxtImg
  provider="twicpics"
  src="/cat_1x1.jpg"
  fit="contain"
  height=600
  width=300
  background: "red"
/>

format

指定输出格式。它可以是图片格式或预览格式。默认情况下，TwicPics 将“猜测”请求浏览器的最佳输出格式，但您可以使用 format 更改此行为。

语法：format='avif'|'heif'|'jpeg'|'png'|__'webp'__

WebP 是 TwicPics 提供的默认格式（如果浏览器支持它）。

示例

这将返回您图片的 avif 格式变体。

<NuxtImg
  provider="twicpics"
  src="/cat_1x1.jpg"
  format="avif"
/>

这将返回您图片的模糊 svg 格式预览。

<NuxtImg
  provider="twicpics"
  src="/cat_1x1.jpg"
  format="preview"
/>

更多信息关于格式的介绍。

quality

指定输出质量，范围从 1（质量差）到 100（质量最佳）。

语法：quality=number

TwicPics 将 quality=70 视为默认值。

注意：Twicpics 根据网络性能自动管理返回的质量，即使在条件困难的情况下也能优化显示速度。

注意：当启用数据节省模式（仅限 Android 手机）时，默认 quality=10。

示例

<NuxtImg
  provider="twicpics"
  src="/cat_1x1.jpg"
  quality=1
/>

更多信息关于质量的介绍。

background

background 指定一种颜色，它将显示在图片的透明和半透明部分。

语法：background=color

示例

<NuxtImg
  provider="twicpics"
  src="/icon-500.png"
  background="red"
/>

<NuxtImg
  provider="twicpics"
  src="/cat_1x1.jpg"
  fit="contain"
  height=600
  width=300
  background: 'red'
/>

更多信息关于背景的介绍。

Twicpics 修饰符

除了标准参数之外，还可以通过 nuxt-img 或 nuxt-picture 的 modifiers 属性访问 Twicpics API 的特定功能。

<NuxtImg
  provider="twicpics"
  src="/path-to-nuxt-demo.jpg"
  ...
  standard props
  ...
  :modifiers="{key_1: value_1, ..., key_n: value_n}"
/>

这些功能及其用法的完整列表请访问这里.

crop

crop 将从图片中提取一个区域，该区域的大小为给定的 crop 大小。如果未给出坐标，则焦点将用作参考来确定提取的起始位置。如果给出坐标，则它们将用于确定提取的起始像素，并且焦点将重置到结果图片的中心。

语法：{ crop: size@coordinates }

<NuxtImg
  provider="twicpics"
  src="/cat.jpg"
  :modifiers="{crop:'500x100'}" <!-- no coordinates given -->
/>
<NuxtImg
  provider="twicpics"
  src="/cat.jpg"
  :modifiers="{crop:'500x100@700x400'}" <!-- passing coordinates -->
/>
<NuxtImg
  provider="twicpics"
  src="/cat.jpg"
  :modifiers="{focus:'auto', crop:'500x100'}" <!-- using focus auto -->
/>

更多信息关于 crop 的介绍。

flip

flip 将根据提供的表达式水平、垂直或同时反转图片。

语法：{ flip: 'both' | 'x' | 'y' }

<NuxtImg
  provider="twicpics"
  src="/puppy.jpg"
  :modifiers="{flip:'both'}" <!-- horizontal and vertical -->
/>
<NuxtImg
  provider="twicpics"
  src="/puppy.jpg"
  :modifiers="{flip:'x'}" <!-- horizontal -->
/>
<NuxtImg
  provider="twicpics"
  src="/puppy.jpg"
  :modifiers="{flip:'y'}" <!-- vertical -->
/>

更多信息关于 flip 的介绍。

focus

focus 将设置焦点坐标。它不会以任何方式修改输出图片，但会更改进一步变换的行为，这些变换会考虑焦点（即覆盖、裁剪和调整大小）。

如果在实际坐标的位置使用 auto，则焦点将自动为您选择！

语法：{ focus: coordinates|'auto' }

<NuxtImg
  provider="twicpics"
  src="/cat_1x1.jpg"
  :modifiers="{focus:'auto', crop:'500x500'}" <!-- using crop with focus auto -->
/>

<NuxtImg
  provider="twicpics"
  src="/football.jpg"
  :modifiers="{focus:'auto', cover:'1:1'}" <!-- changing ratio with focus auto -->
/>

<NuxtImg
  provider="twicpics"
  src="/path-to-nuxt-demo.jpg"
  :modifiers="{focus:'200x200', cover:'1:1'}" <!-- changing ratio with selected focus -->
/>

注意：焦点必须放在修改输出图片的变换之前（即覆盖、裁剪和调整大小）。

更多信息关于 focus 的介绍。

truecolor

truecolor 可用于防止颜色量化。如果未提供布尔值，则假定为 true。

默认情况下，允许量化（truecolor=false）。

量化发生在输出格式为 png 时。

如果您想将明显更大但更精确的图片（带有半透明度）分发给使用不支持 WebP 的浏览器的用户，或者当需要 png 作为输出格式时，请使用 truecolor。

<NuxtImg
  provider="twicpics"
  src="/peacock.jpg"
  format="png"
  :modifiers="{truecolor:true}" <!-- disallowes color quantization -->
/>

<NuxtImg
  provider="twicpics"
  src="/peacock.jpg"
  format="png"
  :modifiers="{truecolor:false}" <!-- allowes color quantization (default value) -->
/>

更多信息关于 truecolor 的介绍。

turn

turn 将更改图片的方向。它接受以度为单位的角度或表达式。角度将四舍五入到最接近的 90° 倍数。

语法：{ turn: number | 'flip' | 'left' | 'right' }

<NuxtImg
  provider="twicpics"
  src="/football.jpg"
  :modifiers="{turn:'left'}" <!-- turns image at -90° -->
/>

<NuxtImg
  provider="twicpics"
  src="/football.jpg"
  :modifiers="{turn:180}" <!-- turns image at 180° -->
/>

更多信息关于 turn 的介绍。

zoom

以等于或大于 1 的系数放大图片，朝向焦点移动，同时保持图片大小。

语法：{ zoom: number }

<NuxtImg
  provider="twicpics"
  src="/cherry-3.jpg"
  :modifiers="{zoom:1.5}" <!-- zooms into image by a factor 1.5 -->
/>

<NuxtImg
  provider="twicpics"
  src="/cherry-3.jpg"
 :modifiers="{zoom:3}" <!-- zooms into image by a factor 3 -->
/>

<NuxtImg
  provider="twicpics"
  src="/cherry-3.jpg"
 :modifiers="{focus:'auto', zoom:3}" <!-- zooms into image by a factor 3 in direction of the focus-->
/>

<NuxtImg
  provider="twicpics"
  src="/cherry-3.jpg"
 :modifiers="{focus:'200x200', zoom:3}" <!-- zooms into image by a factor 3 in direction of the focus-->
/>

更多信息关于 zoom 的介绍。

参数组合

您可以组合 TwicPics API 的多个变换。

请注意，参数的顺序可能很重要。

示例

这将返回图片的变体，我们按顺序执行了以下操作：

从中心裁剪图片到 16:9 的纵横比
然后将焦点放在裁剪后图片的兴趣中心
然后将图片向左旋转 90°

结果是 9:16（不是 16:9）的图片，可能存在错误的兴趣区域。

<NuxtImg
  provider="twicpics"
  src="/football.jpg"
  :modifiers="{cover:'16:9', focus:'auto', turn:'left'}"
/>

这将返回您图片的变体，我们按顺序执行了以下操作：

将焦点放在原始图片的兴趣中心
然后从兴趣中心裁剪图片到 16:9
然后将图片向左旋转 90°

结果是一张裁剪后的图像，保留了感兴趣区域并以 16:9 的格式显示。

<NuxtImg
  provider="twicpics"
  src="/football.jpg"
  fit="fill"
  :modifiers="{focus:'auto', turn:'left', cover:'16:9'}"
/>

处理图像比例

假设你想以 4:3 的比例显示宽度为 300px 的图像。

<NuxtImg
  provider="twicpics"
  src="/cat_1x1.jpg"
  width=300
  fit="fill"
  :modifiers="{cover:'4:3'}"
/>

或者，使用 focus='auto'

<NuxtImg
  provider="twicpics"
  src="/cat_1x1.jpg"
  width=300
  fit="fill"
  :modifiers="{focus:'auto', cover:'4:3'}"
/>

进一步了解 TwicPics

TwicPics 提供了一个 Web 组件集合，可以让你充分利用其功能。

像素完美
布局驱动
理想压缩
延迟加载
LQIP
CLS 优化

Nuxt 的特定集成可在此处获取。

Strapi

Nuxt Image 与 Strapi 集成。

Unsplash

Nuxt Image 与 Unsplash 有很好的集成。