Se o senhor leu este blog nos últimos meses, sabe que Cloudinary oferece uma incrível variedade de funcionalidades, seja em imagens, vídeos e até mesmo em áudio. Gostaria de destacar dez dos meus recursos e truques favoritos para transformar sua mídia no Cloudinary!
Efeito de contorno
Sempre gostei de PNGs transparentes, mas adicionar bordas CSS a imagens PNG ainda mostra um contorno quadrado ao redor da imagem e não apenas seu conteúdo. Sempre me perguntei se havia uma maneira inteligente de adicionar uma borda apenas ao conteúdo visível da imagem, mas o Cloudinary me venceu com o efeito de contorno. Aqui está um exemplo simples de um único contorno:
https://res.cloudinary.com/david-wash-blog/image/upload/e_outline,co_red/logo.png
Aqui está um exemplo mais avançado, usando vários contornos:
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_yellow/e_outline,co_rgb:00FF00/e_outline,co_blue/e_outline,co_rgb:4B0082/e_outline,co_rgb:9400D3/logo.png
Que efeito excelente – eu adoraria conhecer a ciência por trás dessa façanha!
Mapeamento e substituição de cores
Alguma vez o senhor já teve uma imagem quase perfeita, mas gostaria de ajustar um conjunto de cores? O Cloudinary permite que o senhor faça a substituição de cores com uma API muito simples de usar:
e_replace_color:[TO_COLOR RGBA](cor predominante automática, limiar de similaridade de cores = 50), por exemplo,e_replace_color:orange, e_replace_color:aa7812e_replace_color:[TO_COLOR RGBA]:[THRESHOLD]e.g.,e_replace_color:orange:90e_replace_color:[TO_COLOR RGBA]:[THRESHOLD]:[FROM_COLOR]e.g.,r_replace_color:orange:50:green
Aqui está um exemplo muito bom dessa API em ação:
Adicionando e_replace_color:pink substitui a cor azul predominante por rosa!
Efeito de deslocamento
Os pixels da imagem são deslocados de acordo com a intensidade dos pixels em outra imagem especificada (um mapa de gradiente especificado com o parâmetro overlay). Quanto mais forte for a intensidade de cada pixel no mapa de gradiente, maior será o deslocamento do pixel correspondente na imagem de base. A quantidade de deslocamento nas direções horizontal e vertical é controlada pelo uso dos parâmetros ‘x’ e ‘y’, respectivamente;
Isso permite que o senhor coloque de forma inteligente uma imagem sobre outra imagem (pense em personalização de produtos) com pouco esforço:
.../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
Distorção de imagem
Distorção de imagem é uma técnica incrivelmente poderosa, que pode levar muito tempo se o senhor tentar fazer isso manualmente. A API avançada do Cloudinary permite que o senhor execute transformações de imagens para criar imagens incríveis e personalizadas em tempo real. Considere o seguinte fluxo de imagem:
O Cloudinary oferece uma API para todas as linguagens de programação, incluindo modificação de URL para gerar a imagem desejada. Usando imagens separadas, podemos criar um produto final com aparência profissional, mas bastante fácil de criar:
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"}
]})
Não é necessário aprender Photoshop para criar gráficos avançados – automatize a criação deles com apenas uma das muitas transformações incríveis do Cloudinary.
Efeitos – Cartoonify!
Muitos efeitos e filtros de imagem adicionam leves matizes às imagens, mas os efeitos mais avançados são um pouco mais divertidos. Um dos muitos Filtros semelhantes aos do Instagram é o cartoonify, um filtro avançado para dar às suas imagens um efeito de desenho animado. O formato do URL é semelhante a:
.../upload/e_cartoonify/v1470072927/landscape.jpg
Aqui estão alguns exemplos de cartoonify:
O Instagram não tem nada a ver com o Cloudinary! Confira os outros Filtros semelhantes aos do Instagram que eles fornecem!
Sobreposições de fontes personalizadas
Se quiser usar o Cloudinary para personalizar e fornecer sua mídia com sobreposições personalizadas e até mesmo preços ou texto de marca (personalização de produtos), o senhor ficará animado em saber que o Cloudinary permite fazer upload de fontes personalizadas para que o senhor possa maximizar a marca em suas imagens. Comece fazendo o upload da fonte:
Cloudinary::Uploader.upload( "/fonts/AlexBrush-Regular.ttf", resource_type: 'raw', type: 'authenticated', public_id: 'AlexBrush-Regular.ttf');
Com a fonte carregada, o senhor pode usá-la para personalizar e transformar suas imagens, tudo via alteração do URL:
.../upload/o_70,w_700/l_text:AlexBrush-Regular.ttf_80:Double%20Rainbow!,co_deeppink/double_rainbow.jpg
O senhor pode carregar fontes em vários formatos.
Reconhecimento facial avançado
O Cloudinary oferece add-ons premium para processamento de imagens muito avançado; o add-on que primeiro me chamou a atenção foi o Facial Attribute Detection. O recurso FAD do Cloudinary identifica características faciais para que o senhor possa manipular imagens. Por exemplo, imagine que o senhor tenha criado um site que permite que os usuários comprem óculos. Uma coisa que me impediria de comprar óculos on-line é não saber como eu ficaria usando-os. O recurso FAD do Cloudinary resolve esse problema: permite que o usuário carregue uma imagem de seu rosto, analise a imagem com o FAD e, em seguida, transforme uma imagem dos óculos na imagem facial carregada:
.../fl_region_relative,g_adv_eyes,l_glasses,w_1.7/c_thumb,g_faces,w_300,h_300/coupled.jpg
O Cloudinary oferece outros complementos, como Detecção de Celebridades, Capturas de Tela de Sites, Moderação WebPurify e muito mais!
Marcação automática
Uma das ações de processamento de imagens mais úteis é a identificação de objetos dentro da imagem. A má notícia é que codificar seu próprio recurso de reconhecimento é incrivelmente difícil; a boa notícia é que o Cloudinary oferece um incrível recurso de marcação automática para que o senhor não precise fazer isso!
Considere a seguinte imagem:
Posso fazer upload dessa imagem para o Cloudinary usando o 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'
});
…e a carga útil resultante fornece uma matriz de objetos identificados com um nível de confiança:
// ...
"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
Simply adding the mp4 file extension converts the source gif to desired mp4 . To do a proper HTML5 video element with backup formats, you can use the following:
<video width="320" height="180" autoplay loop muted="muted"
poster="http://res.cloudinary.com/demo/image/upload/kitten_fighting.jpg">
<source type="video/mp4"
src="http://res.cloudinary.com/demo/image/upload/kitten_fighting.mp4">
<source type="video/webm"
src="http://res.cloudinary.com/demo/image/upload/kitten_fighting.webm">
Your browser does not support HTML5 video tag.
<a href="http://res.cloudinary.com/demo/image/upload/kitten_fighting.gif">Click here to view original GIF</a>
</video>
The ability to generate a new file by modifying the file extension is incredibly convenient!
HLS/MPEG-DASH Streaming
There’s nothing more frustrating than ineffective streaming; the word “buffering” strikes terror into the minds of every user. Since HLS and MPEG-DASH are two of the most effective streaming formats, Cloudinary offers optimized streaming in those formats and with a variety of options. For example:
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")
O senhor pode até mesmo criar perfis de streaming avançados e personalizados!
Esses recursos são apenas uma pequena amostra do que o Cloudinary pode fazer. Entrega otimizada, transformações com a mudança de um URL, APIs em todos os idiomas; o Cloudinary torna tudo simples, divertido e eficiente!
