10 excelentes trucos y mejoras de imágenes con Cloudinary -

Si has leído este blog durante los últimos meses, sabrás queCloudinary ofrece una increíble variedad de funciones, ya sean imágenes, videos e incluso audio. ¡Quería resaltar diez de mis funciones y trucos favoritos al transformar tus medios en Cloudinary!

Efecto de contorno

Siempre he apreciado los PNG transparentes, pero agrega bordes CSS a las imágenes PNG todavía muestra un contorno cuadrado alrededor de la imagen y no solo su contenido. Siempre me pregunté si había una forma inteligente de agregar un borde solo alrededor del contenido visible de la imagen, pero Cloudinary se me adelantó con efecto de contorno. A continuación se muestra un ejemplo sencillo de un esquema único:

https://res.cloudinary.com/david-wash-blog/image/upload/e_outline,co_red/logo.png

A continuación se muestra un ejemplo más avanzado, que utiliza varios esquemas:

https://res.cloudinary.com/david-wash-blog/image/upload/e_outline,co_red/e_outline,co_rgb:FF7F00/e_outline,co_Yellow/e_outline,co_rgb:00FF00/e_outline,co_blue/e_outline,co_rgb:4B0082/ e_outline,co_rgb:9400D3/e_outline,co_red/e_outline,co_rgb:FF7F00/e_outline,co_amarillo/e_outline,co_rgb:00FF00/e_outline,co_blue/e_outline,co_rgb:4B0082/e_outline,co_rgb:9400D3/logo.png

¡Qué efecto tan excelente! ¡Me encantaría conocer la ciencia detrás de esta hazaña!

Mapeo de colores y reemplazo.

¿Alguna vez has tenido una imagen casi perfecta pero te gustaría ajustar un conjunto de colores? Cloudinary le permite realizar reemplazos de color con una API muy simple de usar:

• e_replace_color:[TO_COLOR RGBA](color auto predominante, umbral de similitud de color = 50), por ejemplo,e_replace_color:orange, e_replace_color:aa7812
• e_replace_color:[TO_COLOR RGBA]:[THRESHOLD]p.ej,e_replace_color:orange:90
• e_replace_color:[TO_COLOR RGBA]:[THRESHOLD]:[FROM_COLOR]p.ej,r_replace_color:orange:50:green

Aquí hay un ejemplo realmente bueno de esta API en acción:

¡ Agregando e_replace_color:pinkse reemplaza el color azul predominante por rosa!

Efecto de desplazamiento

Los píxeles de la imagen se desplazan según la intensidad de los píxeles de otra imagen especificada (un mapa de gradiente especificado con el parámetro de superposición). Cuanto más fuerte sea la intensidad de cada píxel en el mapa de degradado, mayor será el desplazamiento del píxel correspondiente en la imagen base. La cantidad de desplazamiento en las direcciones horizontal y vertical se controla utilizando los parámetros 'x' e 'y' respectivamente.

Esto le permite colocar de forma inteligente una imagen sobre otra (piense en la personalización del producto) con poco esfuerzo:

.../upload/w_180,h_194/c_pad,h_2.0,w_1.0/l_radial_ipdlli,e_displace,y_-10/e_trim/u_glass,x_26,y_-25/sample_ivxrks.jpg

Distorsión de imagen

La distorsión de la imagen es una técnica increíblemente poderosa, que puede llevar mucho tiempo si intentas hacerlo manualmente. La API avanzada de Cloudinary le permite ejecutar transformaciones de imágenes para crear imágenes asombrosas y personalizadas sobre la marcha. Considere el siguiente flujo de imágenes:

Cloudinary offers an API for every programming language including URL modification to generate the desired image. Using separate images we can create a final product that looks professional yet fairly easy to create:

cloudinary.image("base.jpg", {transformation: [  {width: 700, height: 200, crop: "scale"},  {overlay: "mobile_phone", width: 150, gravity: "west"},  {overlay: "mobile_phone", width: 150, gravity: "east"},  {overlay: "movie_time", width: 90, gravity: "center"},  {overlay: "movie_time", width: 100, gravity: "east", effect: "distort:30:20:85:40:25:120:-30:90"},  {overlay: "text:roboto_120_bold:%2B%20%20%20%20%20%20%20%20%3D"}]})

No need to learn Photoshop to create advanced graphics — automate their creation with just one of Cloudinary’s many awesome transformation.

Effects – Cartoonify!

Many image effects and filters add slight tints to images but the more advanced effects are a bit more fun. One of the manyInstagram-like filters is cartoonify, an advanced filter to give your images a cartoon effect. The URL format looks like:

.../upload/e_cartoonify/v1470072927/landscape.jpg

Here are a few examples of cartoonify:

Instagram has nothing on Cloudinary! Check out the otherInstagram-like filters they provide!

Custom Font Overlays

If you want to use Cloudinary to customize and deliver your media with custom overlays and even pricing or branding text (product personalization), you’ll be excited to know that Cloudinary allows you to uploadcustom fonts so you can maximize the branding within your images. Start with uploading the font:

Cloudinary::Uploader.upload(  "/fonts/AlexBrush-Regular.ttf",  resource_type: 'raw', type: 'authenticated',  public_id: 'AlexBrush-Regular.ttf');

With the font uploaded you can use it to customize and transform your images, all viachange of the URL:

.../upload/o_70,w_700/l_text:AlexBrush-Regular.ttf_80:Double%20Rainbow!,co_deeppink/double_rainbow.jpg

You can upload fonts in a variety of formats.

Advanced Facial Recognition

Cloudinary offers premium add-ons for very advanced image processing; the add-on that first caught my eye was Facial Attribute Detection. Cloudinary’s FAD feature identifies facial features so that you can manipulate images. As an example, imagine you’ve created a website which allows users to purchase eyeglasses. One thing that would prevent me from ordering eyeglasses online is not knowing how I’d look wearing them. Cloudinary’s FAD feature solves that problem: allow the user to upload an image of their face, analyze the image with FAD, then transform an image of the glasses onto the uploaded facial image:

.../fl_region_relative,g_adv_eyes,l_glasses,w_1.7/c_thumb,g_faces,w_300,h_300/coupled.jpg

Cloudinary provides other add-ons like Celebrity Detection, Website Screenshots, WebPurify Moderation, and more!

Auto-Tagging

One of the most useful image processing actions is identification of objects within the image. The bad news is that coding your own recognition feature is incredibly difficult; the good news is that Cloudinary provides anamazing auto-tagging feature so that you don’t have to!

Consider the following image:

I can upload that image to Cloudinary using Node.js…

var cloudinary = require('cloudinary');cloudinary.config({cloud_name: 'david-walsh-blog',api_key: '###############',api_secret: ''###############-'###############'});cloudinary.uploader.upload('sports-balls.jpg', function(result) {    console.log('result: ', result);}, {  categorization: 'imagga_tagging'});

…and the resulting payload provides an array of identified objects with a confidence level:

// ..."info": {  "categorization": {    "imagga_tagging": {      "status": "complete",       "data": [        {"tag": "baseball", "confidence": 0.5475},         {"tag": "tennis", "confidence": 0.4414},         {"tag": "football", "confidence": 0.4121},         {"tag": "soccer", "confidence": 0.394}, // ...

You can even query your account for images that match a specific tag!

cloudinary.api.resources_by_tag('arsenal', function(result) {});

GIF – Video Conversion

Different file formats are optimal for different applications, devices, and even specific browsers. While you may upload a GIF to Twitter and other services, most of them convert the GIF to a MP4 for the sake of efficiency, size, and the ability to pause. Not only can Cloudinary deliver and transform your images, they can also manage and optimize formats for you:

!-- Assuming "kitten_fighting.gif" was uploaded... --!-- Render a mp4 of the GIF simply by changing the extension! --http://res.cloudinary.com/demo/image/upload/kitten_fighting.mp4!-- Render a webm of the GIF simply by changing the extension! --http://res.cloudinary.com/demo/image/upload/kitten_fighting.webm

Simplemente agregando la mp4extensión del archivo convierte la fuente gifal formato deseado mp4. Para crear un video elemento HTML5 adecuado con formatos de copia de seguridad, puede utilizar lo siguiente:

bucle de reproducción automática de vídeo silenciado="silenciado" poster="http://res.cloudinary.com/demo/image/upload/kitten_fighting.jpg" source type="video/mp4" src="https://res .cloudinary.com/demo/image/upload/kitten_fighting.mp4" source type="video/webm" src="https://res.cloudinary.com/demo/image/upload/kitten_fighting.webm" Su navegador no admite vídeos etiqueta HTML5. a href="http://res.cloudinary.com/demo/image/upload/kitten_fighting.gif"Haga clic aquí para ver el GIF/a/video original

¡La capacidad de generar un nuevo archivo modificando la extensión del archivo es increíblemente conveniente!

Transmisión HLS/MPEG-DASH

No hay nada más frustrante que una transmisión ineficaz; la palabra “almacenamiento en búfer” infunde terror en la mente de todos los usuarios. Dado que HLS y MPEG-DASH son dos de los formatos de transmisión más efectivos, Cloudinary ofrece transmisión optimizada en esos formatos y con una variedad de opciones. Por ejemplo:

Cloudinary::Uploader.upload("big_buck_bunny.mp4", :resource_type = :video, :eager = [ {:streaming_profile = "full_hd", :format = "m3u8"}, {:streaming_profile = "full_hd", :format = "mpd"}], :eager_async = true, :eager_notification_url = "http://mysite/notify_endpoint", :public_id = "bb_bunny")

¡Incluso puedes crear perfiles de transmisión avanzados y personalizados!

Estas características son sólo una pequeña muestra de lo que Cloudinary puede hacer. Entrega optimizada, transformaciones al cambiar de URL, API en todos los idiomas; ¡Cloudinary lo hace simple, divertido y eficiente!