Sirv - Nuxt 图片提供商

Sirv 与 Nuxt 图片的集成。

要使用 Sirv 提供商，您需要在 Nuxt 图片模块配置中将您的 Sirv URL 设置为 baseURL，如下所示

nuxt.config.ts

export default defineNuxtConfig({
  image: {
    sirv: {
      baseURL: 'https://youralias.sirv.com/' 
    }
  }
})

从您的 Sirv 帐户详细信息页面获取您的别名，或设置自定义域 (说明)。

Sirv `fit` 参数

默认情况下，Sirv 会缩放图像，保持其纵横比，以适合最小尺寸。以下是 fit 属性的标准值的映射，以及它们将如何被 Sirv 解释

fill: ignore
inside: fill
outside: fill
noUpscaling: noup，这是 Sirv 图片提供商的默认选项，因此您无需显式指定它。

`格式`

如果没有指定格式，Sirv 默认情况下将以最佳格式交付您的图片。或者，您可以像这样为图片指定自定义格式

<NuxtImg
    provider="sirv"
    src="/example-image.jpg"
    width="300"
    format="webp"
/>

Sirv 修饰符

要使用 Sirv 特定的转换，请将它们添加到 modifier 属性中。

`配置文件`

使用 Sirv 配置文件将多个转换选项组合成一个参数。例如，您可以将 canvas、crop 和 watermark 参数组合到一个配置文件中，然后像这样使用它

<NuxtImg
    provider="sirv"
    src="/example-image.jpg"
    width="300"
    :modifiers="{profile: 'my-profile'}
/>

`画布`

使用 canvas 修饰符在图片周围添加画布。您还可以设置其宽度、高度、颜色和位置。

`锐化`

使用 sharpen 修饰符锐化图片。

<NuxtImg
  provider="sirv"
  src="/example-image.jpg"
  width="300"
  :modifiers="{sharpen: 50}"
/>

`框架`

使用 frame 修饰符在图片上添加框架/边框。您还可以设置其宽度和颜色。

<NuxtImg
  provider="sirv"
  src="/example-image.jpg"
  width="300"
  :modifiers="{
    frameStyle: 'solid',
    frameColor: '00000',
    frameWidth: '2',
    frameRimColor: '97A6B1',
    frameRimWidth: '2'
   }"
/>

`旋转`

使用 rotate 修饰符旋转图片。您可以指定要旋转图片的度数。

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

颜色和光线选项

Sirv 有各种颜色操作选项，如 grayscale、colorize、colortone、colorLevels，以及光线操作选项，如 lightness、hue、saturation、highlights、shadows、brightness、exposure、contrast。

以下是将图片转换为灰度的方法

<NuxtImg
  provider="sirv"
  src="/example-image.jpg"
  width="300"
  :modifiers="{grayscale: true}"
/>

水印和文字叠加

使用 Sirv 的 Nuxt 图片集成，您可以在其他图片上叠加图片或文字，以进行水印，或使用自定义文字创建动态横幅！

`水印`

使用 watermark 修饰符在现有图片上叠加图片。主要用于水印，但可用于创建横幅、OG 图片和个性化。以下是一个单一水印的示例

<NuxtImg provider="sirv" 
 src="example-image.jpg" 
 width="300" 
 :modifiers="{
    watermark: '/watermark-v1.png',
    watermarkPosition: 'center',
    watermarkWidth: '30%',
  }" 
/>

在此处详细了解 Sirv 水印此处。

叠加文字

您可以在图片上添加文字叠加，并对它们的定位和外观有完全的自由度。

<NuxtImg provider="sirv" 
  src="example-image.jpg" width="300"
  :modifiers="{
    text: 'Hello there',
    textAlign: 'center',
    textPositionGravity: 'south',
    textBackgroundColor: '#ffff',
    textSize: 60,
    textFontFamily: 'Arial',
    textColor: 'white',
  }" 
/>

可以在此处找到文字叠加的更多示例。

支持的转换列表

Sirv 的 Nuxt 图片集成使用直观的名称来表示每个转换。如果您使用与以下任何支持选项都不匹配的属性，它将在 URL 中按原样添加。

支持的参数名称	转换为参数	描述
宽度	w	图片宽度。
高度	h	图片高度。
s	s	按最大边调整图片大小
质量	q	JPEG 图片质量（百分比）。
fit	scale.option	图片缩放选项。
配置文件	配置文件	应用 Sirv 配置文件
格式	格式	提供的图片格式（默认为最佳）。
webpFallback	webp-fallback	不支持 WebP 的浏览器的图片格式。
二次采样	二次采样	色度二次采样，以减小 JPEG 文件大小。
gifCompression	gif.lossy	应用有损压缩，以减小 GIF 文件大小。
裁剪	crop.type	自动裁剪到图片内容的边缘；兴趣点；或人脸。
cropAr	crop.aspectratio	裁剪的纵横比
cw	cw	将图片裁剪到特定宽度。
ch	ch	将图片裁剪到特定高度。
cx	cx	开始图片裁剪的位置（从顶部）。
cy	cy	开始图片裁剪的位置（从左侧）。
cropPaddingX	crop.pad.x	在裁剪区域的左侧/右侧添加填充
cropPaddingY	crop.pad.y	在裁剪区域的顶部/底部添加填充。
canvasHeight	canvas.height	在图片周围创建一个画布（高度）。
canvasWidth	canvas.width	在图片周围创建一个画布（宽度）。
canvasAr	canvas.aspectratio	画布的纵横比，从 1-99，例如 16:9
canvasPosition	canvas.position	图片后面画布的位置。
canvasBorderWidth	canvas.border.width	在画布的左侧和右侧添加额外宽度。
canvasBorderHeight	canvas.border.height	在画布的顶部和底部添加额外高度。
canvasBorderColor	canvas.border.color	画布边框的颜色，例如 E0AA80 或 red。
canvasBorderOpacity	canvas.border.opacity	画布边框的不透明度。
水印	水印	要叠加的图片的文件路径。
watermarkPosition	watermark.position	水印在图片上的位置。
watermarkPositionGravity	watermark.position.gravity	设置 x 和 y 值偏移的起点。
watermarkPositionX	watermark.position.x	水印的位置（从左侧）。
watermarkPositionY	watermark.position.y	水印的位置（从顶部）。
watermarkWidth	watermark.scale.width	水印的宽度。
watermarkHeight	watermark.scale.height	水印的高度。
文本	文本	在图片上显示文字。
textBase64	text.text64	text 参数的替代方案，使用 Base64 编码
textSize	text.size	文字区域相对于图片的宽度。
textAlign	text.align	对齐多行文字。
textPosition	text.position	文字在图片上的位置。
textPositionX	text.position.x	文字的位置（从左侧）。
textPositionY	text.position.y	文字的位置（从顶部）。
textPositionGravity	text.position.gravity	文字在图片上的主位置。
textFontSize	text.font.size	以像素为单位固定文字的大小。
textFontStyle	text.font.style	文字的样式。
textFontFamily	text.font.family	选择字体，例如“Open Sans”。
textFontWeight	text.font.weight	选择字体粗细（light、normal、semi-bold、bold、extra-bold）。
textColor	text.color	文字颜色，例如 E0AA80 或 E0AA8020。
textOpacity	text.opacity	文字的不透明度。
textOutlineWidth	text.outline.width	在文字周围添加轮廓。
textoutlineColor	text.outline.color	文字轮廓的颜色。
textOutlineOpacity	text.outline.opacity	文字轮廓的不透明度。
textOutlineBlur	text.outline.blur	模糊文字轮廓的边缘。
textBackgroundColor	text.background.color	背景颜色，例如 E0AA80 或 E0AA8020。
textBackgroundOpacity	text.background.opacity	背景的不透明度。
锐化	锐化	锐化图片。
模糊	模糊	模糊图片。
灰度	灰度	将图片转换为黑白。
colorize	colorize	在图片上叠加颜色。
colorizeColor	colorize.color	colorize 选项的颜色。
colorizeOpacity	colorize.opacity	颜色叠加的不透明度。
colortone	colortone	更改图片的颜色色调。
colortoneColor	colortone.color	将颜色色调应用于图片。
colortoneLevel	colortone.level	设置与原始图片混合的级别。
colortoneMode	colortone.mode	将颜色色调应用于整个图片，还是仅应用于阴影/高光。
晕影	vigette.value	调整晕影的深度。
vignetteColor	vigette.color	在图片周围添加晕影（暗边缘）。
亮度	亮度	更改图片的亮度。
colorlevelBlack	colorlevel.black	调整图片的黑色级别。
colorlevelWhite	colorlevel.white	调整图片的白色级别。
直方图	直方图	显示 RGB 级别直方图。
色调	色调	更改图片的色调。
饱和度	饱和度	更改图片的饱和度。
高光	高光	更改图片的高光。
阴影	阴影	更改图片的阴影。
亮度	亮度	更改图片的亮度。
曝光	曝光	更改图片的曝光。
对比度	对比度	更改图片的对比度。
旋转	旋转	要旋转图片的度数。
翻转	翻转	垂直翻转图片（镜像）。
翻转	翻转	水平翻转图片（镜像）。
不透明度	不透明度	PNG 图片的不透明度。
frameStyle	frame.style	在图片周围添加框架。
frameColor	frame.color	框架颜色，例如 E0AA80 或 E0AA8020。
frameWidth	frame.width	框架宽度。
frameRimColor	frame.rim.color	边框颜色，例如 E0AA80 或 E0AA8020。
frameRimWidth	frame.rim.width	边框宽度。
pdfPage	page	转换为图像时 PDF 的页码。

从官方文档中了解更多关于 Sirv 的图像转换。

Sanity

Nuxt Image 与 Sanity 完美整合。

Storyblok

Nuxt Image 内部使用 Storyblok 作为静态提供者。