Examples - Nuxt Cloudinary

Below, you can see examples of usage of various effects that you can use from Cloudinary.

Basic transformations

Cloudinary supports a wide variety of powerful transformations that allow you to not only deliver, but easily edit and build new images on the fly.

Background

These examples will help you modify the background of your image.

Remove

removeBackground: Removes the background of the image using AI

removeBackground

Color

background: Specifies a color to use as a background.

removeBackground
background="blueviolet"

Image

underlay: Specifies a public ID to use as an underlaying image.

removeBackground
underlay=<YOUR_PUBLIC_ID>

Cropping

crop: Specifies the mode to use when cropping an image based on the given dimensions.

crop

Fill

fillBackground: Fills the background of an image using Generative AI

fillBackground

Generative AI

This section will guide you through the process of using Generative AI functionalities of Cloudinary

Enhance

enhance: Enhance the visual appeal of an image using Generative AI

enhance

Recolor

recolor: Recolors an object in an image using Generative AI

recolor={['shoelaces', 'purple']}

Remove Element

remove: Removes an object in an image using Generative AI

remove='mountain'

Replace Object

replace: Replaces an object in an image using Generative AI

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

Replace Background

replaceBackground: Replace background of the image by using AI

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

Restore

restore: Restores an image using Generative AI

restore

Filters & Effects

This section will show you examples about usage of filters and effects

Zoompan

zoompan="loop"

Blur

blur="1200"

Pixelate

pixelate

Grayscale

grayscale

Tint

tint="equalize:80:blue:blueviolet"

Opacity

opacity="50"

Shear

shear="40:0"

Border

border="40px_solid_purple"

Loop

loop

Angle

angle="15"

Multiple Effects

:effects="[ { background: 'green' }, { gradientFade: true }, { gradientFade:
'symetric,x_0.5' } ]"

Overlays

overlays: Any array of overlay objects

:overlays="[
    {
      position: {
        gravity: 'north',
        y: 60
      },
      text: {
        color: 'rgb:52a4ff80',
        fontFamily: 'Source Sans Pro',
        fontSize: 320,
        fontWeight: 'black',
        text: 'MUSIC',
        letterSpacing: -10,
        lineSpacing: -100,
        stroke: true,
        border: '20px_solid_rgb:2d0eff99',
      }
    },
    {
      position: {
        gravity: 'south',
        y: 60
      },
      text: {
        color: 'rgb:52a4ff80',
        fontFamily: 'Source Sans Pro',
        fontSize: 320,
        fontWeight: 'black',
        text: 'IS LIFE',
        letterSpacing: -10,
        lineSpacing: -100,
        stroke: true,
        border: '20px_solid_rgb:2d0eff99',
      }
    }
  ]"

Configuration

CldMediaLibrary