Skip to content

Commit

Permalink
feat: image replace bg
Browse files Browse the repository at this point in the history
  • Loading branch information
Baroshem committed Aug 8, 2024
1 parent b668643 commit 100ccea
Show file tree
Hide file tree
Showing 4 changed files with 151 additions and 149 deletions.
41 changes: 21 additions & 20 deletions docs/content/2.components/CldImage/2.configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,22 +25,23 @@ CldImage extends the Upnic Image component using Cloudinary tech. This means all

The CldImage component exposes many of Cloudinary's transformations in an easy-to-use way right inside of Nuxt.

| Prop | Type | Default | Example | More |
| --------------------- | ----------------------- | --------- | ----------------------- | ------------------------------------------------------------------------------------------ |
| angle | number | `-` | `"45"` | [Link](https://cloudinary.com/documentation/transformation_reference#a_angle?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| background | string | `-` | `"blue"` | [Link](https://cloudinary.com/documentation/transformation_reference#b_background?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| crop | string | `"limit"` | `"thumb"` | [Link](https://cloudinary.com/documentation/transformation_reference#c_crop_resize?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| enhance | boolean | `-` | `"true"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_enhance?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| fillBackground (Beta) | `boolean/object` | `-` | `{{ gravity: 'east' }}` | [Link](https://cloudinary.com/documentation/transformation_reference#b_gen_fill?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| gravity | string | `auto` | `"faces"` | [Link](https://cloudinary.com/documentation/transformation_reference#g_gravity?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| loop | `boolean/number` | `-` | `true` | [Link](https://cloudinary.com/documentation/transformation_reference#e_loop?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| recolor | `array/object` | `-` | `['duck', 'blue']` | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_recolor?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| remove | `string/array/object` | `-` | `apple` | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_remove?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| removeBackground | `boolean/string` | `false` | `true` | [Link](https://cloudinary.com/documentation/transformation_reference#e_background_removal?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| replace | `array/object` | `-` | `['apple', 'banana']` | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_replace?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| restore | boolean | `-` | `true` | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_restore?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| zoom | string | `-` | `0.5` | [Link](https://cloudinary.com/documentation/transformation_reference#z_zoom?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| zoompan | `boolean/string/object` | `-` | `true` | [Link](https://cloudinary.com/documentation/transformation_reference#e_zoompan?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| Prop | Type | Default | Example | More |
| --------------------- | ----------------------- | --------- | --------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| angle | number | `-` | `"45"` | [Link](https://cloudinary.com/documentation/transformation_reference#a_angle?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| background | string | `-` | `"blue"` | [Link](https://cloudinary.com/documentation/transformation_reference#b_background?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| crop | string | `"limit"` | `"thumb"` | [Link](https://cloudinary.com/documentation/transformation_reference#c_crop_resize?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| enhance | boolean | `-` | `"true"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_enhance?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| fillBackground (Beta) | `boolean/object` | `-` | `{{ gravity: 'east' }}` | [Link](https://cloudinary.com/documentation/transformation_reference#b_gen_fill?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| gravity | string | `auto` | `"faces"` | [Link](https://cloudinary.com/documentation/transformation_reference#g_gravity?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| loop | `boolean/number` | `-` | `true` | [Link](https://cloudinary.com/documentation/transformation_reference#e_loop?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| recolor | `array/object` | `-` | `['duck', 'blue']` | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_recolor?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| remove | `string/array/object` | `-` | `apple` | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_remove?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| removeBackground | `boolean/string` | `false` | `true` | [Link](https://cloudinary.com/documentation/transformation_reference#e_background_removal?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| replace | `array/object` | `-` | `['apple', 'banana']` | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_replace?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| restore | boolean | `-` | `true` | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_restore?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| replaceBackground | `boolean/string/object` | `-` | `true/'fish tank'/{ prompt: 'fish tank', seed: 3 }` | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_background_replace?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| zoom | string | `-` | `0.5` | [Link](https://cloudinary.com/documentation/transformation_reference#z_zoom?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| zoompan | `boolean/string/object` | `-` | `true` | [Link](https://cloudinary.com/documentation/transformation_reference#e_zoompan?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |

## General Props

Expand Down Expand Up @@ -76,8 +77,8 @@ Following props can be passed to the CldImage component to make it work in more

All effect props are disabled by default.

| Prop Name | Type | Example | More |
| ------------------ | ------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| Prop Name | Type | Example | More |
| ------------------ | ------------- | ---------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| art | string | `"al_dente"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_art?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| autoBrightness | bool/string | `true`, `"80"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_auto_brightness?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| autoColor | bool/string | `true`, `"80"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_auto_color?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
Expand All @@ -87,11 +88,11 @@ All effect props are disabled by default.
| blur | bool/string | `true`, `"800"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_blur?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| blurFaces | bool/string | `true`, `"800"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_blur_faces?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| blurRegion | bool/string | `true`, `"1000,h_425,w_550,x_600,y_400"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_blur_region?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| border | string | `"5px_solid_purple"` | `-` |
| border | string | `"5px_solid_purple"` | `-` |
| brightness | bool/string | `true`, `"100"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_brightness?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| brightnessHSB | bool/string | `true`, `"100"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_brightness_hsb?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| cartoonify | bool/string | `true`, `"70:80"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_cartoonify?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| color | string | `"blue"` | `-` |
| color | string | `"blue"` | `-` |
| colorize | string | `"35,co_darkviolet"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_colorize?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| contrast | bool/string | `true`, `"100"`, `"level_-70"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_contrast?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
| distort | string | `"150:340:1500:10:1500:1550:50:1000"`, `"arc:180.0"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_distort?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
Expand Down
12 changes: 11 additions & 1 deletion docs/content/2.components/CldImage/3.examples.md
Original file line number Diff line number Diff line change
Expand Up @@ -103,11 +103,21 @@ remove='mountain'
`replace`: Replaces an object in an image using Generative AI

```html
replace=['turtle', 'shark']
:replace="['turtle', 'shark']""
```

:image-with-replace{style="text-align: center; margin: 0 auto"}

### Replace Background

`replaceBackground`: Replace background of the image by using AI

```html
:replaceBackground="{ prompt: 'fish tank', seed: 3 }""
```

:cld-image{src="images/sneakers" width="1200" height="1200" alt="test" replaceBackground style="text-align: center; margin: 0 auto"}

### Restore

`restore`: Restores an image using Generative AI
Expand Down
55 changes: 23 additions & 32 deletions playground/app.vue
Original file line number Diff line number Diff line change
@@ -1,40 +1,38 @@
<script lang="ts" setup>
// Usage of `useCldImageUrl` composable
const { url } = useCldImageUrl({ options: { src: '/cld-sample-5.jpg' } })
console.log(url)
const { url } = useCldImageUrl({ options: { src: "/cld-sample-5.jpg" } });

Check failure on line 3 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 18)

Strings must use singlequote

Check failure on line 3 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 18)

Extra semicolon
console.log(url);

Check failure on line 4 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 18)

Extra semicolon
const { url: videoUrl } = useCldVideoUrl({
options: { src: 'videos/mountain-stars' },
})
console.log(videoUrl)
options: { src: "videos/mountain-stars" },

Check failure on line 7 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 18)

Strings must use singlequote
});

Check failure on line 8 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 18)

Extra semicolon
console.log(videoUrl);

Check failure on line 9 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 18)

Extra semicolon
const mediaAssets = [
{ tag: 'electric_car_product_gallery_demo' }, // by default mediaType: "image"
{ tag: 'electric_car_product_gallery_demo', mediaType: 'video' },
{ tag: 'electric_car_360_product_gallery_demo', mediaType: 'spin' },
]
{ tag: "electric_car_product_gallery_demo" }, // by default mediaType: "image"

Check failure on line 12 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 18)

Strings must use singlequote
{ tag: "electric_car_product_gallery_demo", mediaType: "video" },

Check failure on line 13 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 18)

Strings must use singlequote

Check failure on line 13 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 18)

Strings must use singlequote
{ tag: "electric_car_360_product_gallery_demo", mediaType: "spin" },

Check failure on line 14 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 18)

Strings must use singlequote
];
const buttonId = 'open-btn'
const buttonId = "open-btn";
const cldVideoRef = ref()
const cldVideoRef = ref();
const chapters = {
0: 'Chapter 1',
6: 'Chapter 2',
9: 'Chapter 3',
}
0: "Chapter 1",
6: "Chapter 2",
9: "Chapter 3",
};
const colors = {
accent: '#ff0000',
base: '#00ff00',
text: '#0000ff',
}
accent: "#ff0000",
base: "#00ff00",
text: "#0000ff",
};
</script>

<template>
<button :id="buttonId">
Select Image or Video
</button>
<button :id="buttonId">Select Image or Video</button>

Check warning on line 35 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 18)

Expected 1 line break after opening tag (`<button>`), but no line breaks found

Check warning on line 35 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 18)

Expected 1 line break before closing tag (`</button>`), but no line breaks found
<CldMediaLibrary
api-key="12345"
:button-id="buttonId"
Expand All @@ -45,10 +43,7 @@ const colors = {
cloud-name="demo"
:button-id="buttonId"
/>
<CldOgImage
src="cld-sample-2"
twitter-title="test"
/>
<CldOgImage src="cld-sample-2" twitter-title="test" />

Check warning on line 46 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 18)

'twitter-title' should be on a new line
<CldVideoPlayer
ref="cldVideoRef"
width="1620"
Expand All @@ -65,12 +60,7 @@ const colors = {
upload-preset="nuxt-cloudinary-unsigned"
:tags="['sad', 'music']"
>
<button
type="button"
@click="open"
>
Upload an Image
</button>
<button type="button" @click="open">Upload an Image</button>

Check warning on line 63 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 18)

'@click' should be on a new line

Check warning on line 63 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 18)

Expected 1 line break after opening tag (`<button>`), but no line breaks found

Check warning on line 63 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 18)

Expected 1 line break before closing tag (`</button>`), but no line breaks found
</CldUploadWidget>
<CldUploadButton upload-preset="nuxt-cloudinary-unsigned">
Upload
Expand All @@ -84,6 +74,7 @@ const colors = {
priority
sizes="(max-width: 600px) 480px,
800px"
:replaceBackground="{ prompt: 'fish tank', seed: 3 }"

Check warning on line 77 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 18)

Attribute ':replaceBackground' must be hyphenated
/>
<CldImage
src="cld-sample-5"
Expand Down
Loading

0 comments on commit 100ccea

Please sign in to comment.