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

Cloudinary additionally supports dynamic crop modes like thumb that may provide a different result based on the given width and height. To help provide more options for controlling cropping images, you can specify and object or array of objects.

For instance, to crop the original source image, which will then later resize it to the initial width and height, you can use:

:crop="{
  type: 'thumb',
  width: 600,
  height: 600,
  source: true,
}"

Extract

extract: Extracts an area or multiple areas of an image, described in natural language.

:extract="{
  prompt: 'space jellyfish',
  multiple: true,
  mode: 'mask',
  invert: true,
}"

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