Superposiciones de imágenes sobre la marcha con Cloudinary

Superposiciones de imágenes sobre la marcha con Cloudinary

La superposición de imágenes no se trata únicamente de tener el toque correcto para crear una imagen asombrosa. También necesita una gran herramienta que simplifique el proceso. Cloudinary, un servicio de imagen y video basado en la nube para sitios web y aplicaciones móviles, es exactamente la herramienta que necesita.

Cómo superponer imágenes

Primero abra un gratis Cuenta de Cloudinary, si aún no tiene una. Luego cargue imágenes, ya sea a través de la consola de administración de Cloudinary o usando la API. Una vez que se carga una imagen en su cuenta de Cloudinary, también se almacena en la nube.

Para crear una superposición, simplemente debe definir cómo le gustaría modificar su imagen original dentro de la URL de entrega de la imagen. De acuerdo con las directivas agregadas a la URL, una nueva imagen derivada se procesa sobre la marcha y se almacena en caché. El resultado se entregará súper rápido a través de la red de entrega de contenido (CDN). Cualquier solicitud posterior a la misma URL se enviará desde la caché.

Aquí mostramos cómo poner el logotipo de una empresa en un koala. Con Cloudinary, esta tarea común se convierte en un trabajo fácil. La URL de la imagen original del koala es:

https://res.cloudinary.com/cld-name/koala.jpg

La URL de superposición de imágenes es:

https://xn--diseopaginaswebya-ixb.es/wp-content/uploads/2021/12/Superposiciones-de-imagenes-sobre-la-marcha-con-Cloudinary.jpg

La estructura de la URL es:

<domain name>/<cloud  name>/<image manipulation parameters>/<image  public-id>.<image format>

La superposición se creó agregando los siguientes parámetros a la URL:

  • l_
  • w_
  • c_

Asegúrese de visitar las URL de las imágenes que se muestran en los ejemplos aquí y pruébelas.

Construyendo la URL de la imagen usando JavaScript

Puede crear la URL de la imagen usted mismo o utilizar uno de los SDK de Cloudinary bibliotecas. En los siguientes ejemplos, usaré la biblioteca principal de JavaScript, que es Java Script puro, pero también hay un complemento de JQuery.

Primero debe incluir la fuente de JavaScript, que puede descargar desde cloudinary-core github proyecto.

<script src="https://www.noupe.com/development/<path>/cloudinary-core-shrinkwrap.js"  type="text/javascript"></script>

A continuación, debe configurar el nombre de la nube de su cuenta en el código. El nombre de la cuenta se define cuando se registra en Cloudinary. En los siguientes ejemplos, el nombre de la nube es «cld-name».

var cl = cloudinary.Cloudinary.new({cloud_name: "cld-name"});

Ahora, usaré la variable cl creada aquí para llamar a los métodos de Cloudinary. Si prefiere usar JQuery, puede encontrarlo aquí.

Esta es la llamada de JavaScript para crear la URL de la imagen con la superposición que se muestra:

cl.url("koala", { overlay: "cloudinary_icon", width: 200, crop: "scale" });

Los parámetros utilizados en esta llamada son la imagen public_id que es «koala», la imagen superpuesta public_id, que es «cloudinary_icon». Para ambos, public_id significa el nombre de la imagen en la biblioteca multimedia de Cloudinary. El siguiente parámetro es ancho = 200 píxeles, que se utiliza para cambiar el tamaño de la imagen de superposición para que tenga 200 píxeles de ancho. El último parámetro es el recorte, que determina el modo de recorte utilizado para cambiar el tamaño de la imagen superpuesta. La opción de «escala» seleccionada cambia de tamaño al ancho solicitado mientras conserva la relación de aspecto original. El resultado de esta llamada es la «URL de superposición de imágenes» como se mostró anteriormente.

Creación de marcas de agua

Un caso de uso común y básico para la superposición de imágenes es agregar una marca de agua. Es una forma útil de proteger y proteger sus imágenes en línea con derechos de autor. La imagen con la que comenzamos ya tiene nuestro ícono, pero quizás prefieras agregarlo de una manera más sutil, como una marca de agua. Estos son los parámetros necesarios para hacer eso:

  • Las dimensiones de la superposición se definen por el ancho y el recorte establece el tipo de recorte.
  • La ubicación para colocar la superposición está definida por: gravedad
  • Los efectos visuales aplicados en la superposición son: efecto de opacidad y brillo
cl.url("koala", { overlay: "cloudinary_icon", width: 200, crop: "scale", gravity: "south_east", opacity: 50, effect: "brightness:200"});

URL de la imagen:

https://xn--diseopaginaswebya-ixb.es/wp-content/uploads/2021/12/1639619584_217_Superposiciones-de-imagenes-sobre-la-marcha-con-Cloudinary.jpg

Superposiciones de texto dinámicas

La creación de superposiciones de texto dinámicas abre un mundo de posibilidades. Puede actualizar fácilmente los banners con las últimas ofertas y promociones. Las fuentes de Google son compatibles de forma predeterminada, pero también puede cargar fuentes personalizadas a su cuenta. Por ejemplo, anunciar una venta especial que se llevará a cabo solo hoy.

cl.url("bag", { transformation: [
  {overlay: "text:roboto_60:EXTRA%2010%25%20OFF", color: "white", y: 110}, 
{overlay: "text:roboto_60:SALE%20ENDS%20TODAY", color: "white", y: 200}]});

URL de la imagen: https://res.cloudinary.com/cld-name/image/upload/l_text:roboto_60:EXTRA 10% 25 OFF, co_white, y_110 / l_text: roboto_60: VENTA TERMINA HOY, co_white, y_200 / bag.jpg

Superposiciones de texto personalizadas

Las superposiciones de texto también se pueden personalizar. Puede reemplazar el texto sobre la marcha en su código utilizando la información almacenada en una cookie, mostrando a cada usuario su propio texto basado en la información recopilada de visitas anteriores al sitio. Para asegurarse de que el texto se verá en cualquier color de fondo, es eficaz utilizar una fuente de borde.

cl.url("gift", {  overlay: " text:arial_80_stroke:Happy%20Birthday%20John", color: "white", gravity: "north", y: 5, border: "2px_solid_black"});

https://res.cloudinary.com/cld-name/image/upload/l_text:arial_80_stroke:Feliz cumpleaños John, co_white, bo_2px_solid_black, g_north, y_5 / gift.jpg

También tiene la opción de implementarlo usando la cookie de Cloudinary como parámetro dentro de la URL de la imagen. Debe tener su propia configuración de CName por Cloudinary y luego la URL será:

http://CNAME/l_text:arial_80_stroke:__cld_attribute1__,co_white,bo_2px_solid_black,g_north,y_5/ gift.jpg

El texto que se muestra en la imagen será el valor de la cookie llamada __cld_attribute1__

Superposición de imágenes de perfil social

Con Cloudinary, puede obtener dinámicamente la imagen de perfil de las redes sociales (Facebook, Twitter, Instagram, Google+) y usarla como imagen base o como imagen superpuesta.

cl.url ("KermitTheFrog", { type: "twitter_name", transformation: [ 
  { width: 150, crop: "scale"} , 
  { overlay: "instagram_name:realmisspiggy",  width: 150, crop: "scale", x: 150 },
{ border: "3px_solid_black"}]});

https://res.cloudinary.com/cld-name/image/twitter_name/w_150,c_scale/l_instagram_name:realmisspiggy,w_150,x_150/bo_3px_solid_black/KermitTheFrog.jpg

Detección de rostrosuperposición basada

Para crear una superposición genial, es útil detectar la cara en la imagen, especialmente si planea recrear el carnaval de máscaras de Venecia, como se muestra a continuación. La superposición se coloca automáticamente en los ojos que se detectan en la imagen.

cl.url("team.jpg", { transformation: [ 
  { width: 640, crop: "scale",  } , 
{ flags: "region_relative", gravity: "adv_eyes", overlay: "harlequinmask", width: 1.7 }]});

https://xn--diseopaginaswebya-ixb.es/wp-content/uploads/2021/12/1639619587_617_Superposiciones-de-imagenes-sobre-la-marcha-con-Cloudinary.jpg

Otra opción es pixelar automáticamente los rostros para mantener la confidencialidad.

cl.url("couple", { width: 640,  crop: "scale", effect: "pixelate_faces:10"});

https://xn--diseopaginaswebya-ixb.es/wp-content/uploads/2021/12/1639619587_375_Superposiciones-de-imagenes-sobre-la-marcha-con-Cloudinary.jpg

Superposición de imágenes en video

Cloudinary también admite video, por lo que la misma API le permite interactuar con imágenes, gifs animados y videos. Puede crear un gif animado a partir de varias imágenes, capturar una imagen de un gif animado o un videoclip e incluso superponer una imagen en un videoclip durante un período de tiempo definido como se muestra a continuación.

cl.video («ejecutar»,} controles: verdadero, póster: cl.url («ejecutar.jpg», {resource_type: «video»}), transformación: [  { overlay: “candy”, width: 0.4, gravity: “south_west”, start_offset: “5”, end_offset: “7.5” }, { overlay: “candy”, width: 0.4, gravity: “south_east”, start_offset: “8”, end_offset: “12”, angle: “hflip”}]});

Resumen

Esta es solo la punta del iceberg Cloudinary admite una larga lista de opciones de manipulación de imágenes que puede encontrar aquíy lo mismo vale para video. Además, las imágenes se pueden optimizar para una entrega más rápida mediante el uso de funciones como formato automático y calidad automática.

Ahora depende de usted, siga adelante y mejore las imágenes de su sitio web, como han demostrado muchos estudios, los millennials prefieren las imágenes al texto de todos modos.

(Descargo de responsabilidad: esta publicación está patrocinada por Cloudinary).

#Superposiciones #imágenes #sobre #marcha #con #Cloudinary

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *