Skip to content

Commit da8ee76

Browse files
author
wenyiqing
committed
feat(provider): add Tencent Cloud COS image provider
1 parent c116d6d commit da8ee76

9 files changed

Lines changed: 958 additions & 0 deletions

File tree

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
---
2+
title: Tencent Cloud
3+
description: Use Tencent Cloud COS imageMogr2 for image processing.
4+
links:
5+
- label: Source
6+
icon: i-simple-icons-github
7+
to: https://github.com/nuxt/image/blob/main/src/runtime/providers/tencentCloud.ts
8+
size: xs
9+
---
10+
11+
Integration with Tencent Cloud COS Cloud Infinite (CI) image processing (`imageMogr2`). Supports resizing, cropping, rotation, format conversion, quality control, Gaussian blur, sharpening, and more.
12+
13+
## Setup
14+
15+
Set the bucket domain as `baseURL` in `nuxt.config.ts`:
16+
17+
```ts [nuxt.config.ts]
18+
export default defineNuxtConfig({
19+
image: {
20+
tencentCloud: {
21+
baseURL: 'https://<bucket>.cos.<region>.myqcloud.com'
22+
}
23+
}
24+
})
25+
```
26+
27+
::note
28+
`baseURL` should point to a publicly accessible COS bucket domain (or a bound CDN domain). No trailing slash is needed.
29+
::
30+
31+
## Basic Usage
32+
33+
```vue
34+
<NuxtImg
35+
provider="tencentCloud"
36+
src="/path/to/image.png"
37+
width="600"
38+
height="400"
39+
fit="cover"
40+
:modifiers="{ quality: 80, format: 'webp' }"
41+
/>
42+
```
43+
44+
## Standard Modifiers
45+
46+
All 7 standard NuxtImg modifiers are mapped to COS imageMogr2:
47+
48+
| Modifier | COS Mapping | Description |
49+
|---|---|---|
50+
| `width` / `height` | `/thumbnail/<W>x<H>` | Proportional scaling, affected by `fit` |
51+
| `fit` | thumbnail suffix | `contain``<W>x<H>`, `cover``!<W>x<H>r`, `fill``<W>x<H>!` |
52+
| `quality` | `/quality/<Q>` | Quality 1-100 |
53+
| `format` | `/format/<f>` | Output format, `jpeg` is auto-mapped to `jpg` |
54+
| `background` | `/pad/1/color/<base64>` | Used with scaling, fills background color |
55+
| `blur` | `/blur/<n>x<n>` | Gaussian blur |
56+
57+
## COS Extended Modifiers
58+
59+
Pass Tencent Cloud-specific image processing parameters via the `:modifiers` prop:
60+
61+
| Modifier | COS Mapping | Description |
62+
|---|---|---|
63+
| `crop` | `/crop/<W>x<H>` | Regular crop (independent of scaling) |
64+
| `gravity` | `/gravity/<pos>` | Crop anchor: center, north, south, west, east, northwest, etc. |
65+
| `dx` / `dy` | `/dx/<n>/dy/<n>` | Crop offset |
66+
| `iradius` | `/iradius/<r>` | Inscribed circle crop radius |
67+
| `scrop` | `/scrop/<W>x<H>` | Smart face crop |
68+
| `rotate` | `/rotate/<deg>` | Clockwise rotation 0-360° |
69+
| `autoOrient` | `/auto-orient` | Auto-rotate based on EXIF orientation |
70+
| `sharpen` | `/sharpen/<v>` | Sharpen |
71+
| `strip` | `/strip` | Strip EXIF metadata |
72+
| `interlace` | `/interlace/1` | Progressive JPEG/GIF |
73+
| `pad` | `/pad/1` | Pad mode (used with background) |
74+
75+
## Examples
76+
77+
### Resize + Format + Quality
78+
79+
```vue
80+
<NuxtImg
81+
provider="tencentCloud"
82+
src="/photos/banner.png"
83+
width="1200"
84+
height="500"
85+
fit="cover"
86+
:modifiers="{ quality: 85, format: 'webp' }"
87+
/>
88+
```
89+
90+
Generated URL: `?imageMogr2/thumbnail/!1200x500r/quality/85/format/webp`
91+
92+
### Crop + Gravity
93+
94+
```vue
95+
<NuxtImg
96+
provider="tencentCloud"
97+
src="/photos/portrait.jpg"
98+
:modifiers="{ crop: '300x300', gravity: 'center' }"
99+
/>
100+
```
101+
102+
Generated URL: `?imageMogr2/crop/300x300/gravity/center`
103+
104+
### Rotate + Sharpen + Strip Metadata
105+
106+
```vue
107+
<NuxtImg
108+
provider="tencentCloud"
109+
src="/photos/landscape.jpg"
110+
:modifiers="{ rotate: 90, sharpen: 70, strip: true }"
111+
/>
112+
```
113+
114+
Generated URL: `?imageMogr2/rotate/90/sharpen/70/strip`
115+
116+
### Gaussian Blur (Placeholder Effect)
117+
118+
```vue
119+
<NuxtImg
120+
provider="tencentCloud"
121+
src="/photos/hero.jpg"
122+
width="100"
123+
:modifiers="{ blur: 20, quality: 10 }"
124+
/>
125+
```
126+
127+
Generated URL: `?imageMogr2/thumbnail/100x/quality/10/blur/20x20`
128+
129+
### Smart Face Crop
130+
131+
```vue
132+
<NuxtImg
133+
provider="tencentCloud"
134+
src="/photos/group.jpg"
135+
:modifiers="{ scrop: '200x200' }"
136+
/>
137+
```
138+
139+
Generated URL: `?imageMogr2/scrop/200x200`
140+
141+
## References
142+
143+
- [COS imageMogr2 Scaling](https://cloud.tencent.com/document/product/436/44880)
144+
- [COS imageMogr2 Cropping](https://cloud.tencent.com/document/product/436/44881)
145+
- [COS imageMogr2 Rotation](https://cloud.tencent.com/document/product/436/44882)
146+
- [COS imageMogr2 Format Conversion](https://cloud.tencent.com/document/product/436/44883)
147+
- [COS imageMogr2 Quality](https://cloud.tencent.com/document/product/436/44884)
148+
- [COS imageMogr2 Gaussian Blur](https://cloud.tencent.com/document/product/436/44885)
149+
- [COS imageMogr2 Sharpen](https://cloud.tencent.com/document/product/436/44886)

0 commit comments

Comments
 (0)