|
| 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