Crie cartões personalizados de Dia dos Namorados com Transloadit e Uppy
Com o Dia dos Namorados chegando, queremos compartilhar um projeto divertido que você pode criar com a Transloadit e o Uppy. Vamos usar o Robot /image/resize para criar um gerador de cartões personalizados de Dia dos Namorados. Adicione também um nome ao cartão e você terá um cartão personalizado para enviar para quem você ama.
Nossas Assembly Instructions
Primeiro, vamos dar uma olhada nas Assembly Instructions que vamos usar.
{
"steps": {
"watermark": {
"use": ":original",
"robot": "/image/resize",
"width": "1921",
"height": "1921",
"resize_strategy": "fillcrop",
"watermark_url": "https://transloadit.com/assets/images/blog/2023-01-26-valentines-card-generator-1.png",
"watermark_size": "100%",
"watermark_position": "center",
"imagemagick_stack": "v3.0.1"
},
"add_text": {
"use": "watermark",
"robot": "/image/resize",
"text": [
{
"text": "${fields.message}",
"size": 80,
"color": "#ffffff",
"valign": "bottom",
"y_offset": -90,
"x_offset": 0
}
],
"imagemagick_stack": "v3.0.1",
"result": true
}
}
}
Aqui precisamos usar dois Steps separados com o /image/resize. Nosso primeiro Step adiciona uma moldura decorativa ao redor da imagem original e, ao mesmo tempo, recorta e redimensiona a imagem para que ela se encaixe. Em seguida, o segundo Step adiciona um texto sobre a nossa imagem com marca-d’água, que vamos modificar depois com JavaScript. Se fizéssemos isso no mesmo Step, a moldura da imagem ficaria na frente do texto, escondendo-o no resultado final.
Salve essas Instructions como um Template. O JavaScript abaixo envia a mensagem como um campo, mantendo as Instructions de processamento em um só lugar. Antes de publicar, use assinaturas geradas no servidor e valide a mensagem no seu servidor. Nunca coloque um Auth Secret no código do navegador.
A URL do cartão gerado é temporária e expira após 24 horas. Salve o cartão antes que ele expire ou adicione um Robot de exportação, como o /s3/store, para ter armazenamento durável.
HTML e CSS
Infelizmente, ainda não temos onde exibir nosso novo Template. Vamos resolver isso! Copie o HTML abaixo para um novo arquivo HTML.
Preste atenção ao nosso elemento input. Vamos usá-lo na próxima seção para permitir
que o usuário altere o nome que será adicionado ao cartão.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Transloadit Valentine</title>
<link href="https://releases.transloadit.com/uppy/v3.3.1/uppy.min.css" rel="stylesheet" />
</head>
<style></style>
<body>
<h1>Transloadit Valentine</h1>
<p>Upload a picture of your Valentine and we'll make it a Valentine's Day card!</p>
<div class="input-container">
<label for="name">Name:</label>
<input id="name" name="name" maxlength="12" />
</div>
<div id="drag-drop-area"></div>
<img id="result" alt="Your personalized Valentine's Day card" hidden />
<p id="status" role="status"></p>
</body>
</html>
Agora, vamos dar um estilo bonito à nossa página. Dentro da tag style, adicione o CSS a seguir.
:root {
--primary: #7f626a;
--secondary: #f8edeb;
--accent: #ff4d6d;
--accent-highlight: #f9ccd2;
}
body {
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--secondary);
color: var(--primary);
font-family: sans-serif;
}
h1,
p {
margin: 0 0 0.5rem;
}
#result {
border-radius: 10px;
width: 480px;
max-width: calc(100vw - 2rem);
border: none;
contain: content;
aspect-ratio: 1/1;
margin: 2rem;
}
.input-container {
margin: 1rem;
color: var(--primary);
}
input {
border: none;
border-bottom: 2px var(--primary) dashed;
background-color: transparent;
text-align: start;
font: inherit;
color: var(--accent);
}
input:focus {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.uppy-Dashboard {
max-width: 90vw;
}
.uppy-Dashboard-innerWrap {
background-color: var(--secondary);
border: var(--primary) 2px dashed;
}
.uppy-Dashboard-AddFiles {
border: 0 !important;
}
.uppy-Dashboard-poweredBy,
.uppy-Dashboard-poweredByIcon {
color: var(--primary) !important;
stroke: var(--primary);
}
.uppy-Dashboard-AddFiles-title,
.uppy-DashboardTab-name {
color: var(--primary);
}
.uppy-DashboardTab-btn:hover {
background-color: var(--accent-highlight) !important;
}
.uppy-Dashboard-browse,
.uppy-ProviderIconBg,
.uppy-DashboardContent-back,
.uppy-StatusBar-actionBtn {
color: var(--accent);
fill: var(--accent);
}
.uppy-DashboardContent-bar,
.uppy-StatusBar-actions,
.uppy-StatusBar,
.uppy-StatusBar::before {
border: none !important;
background-color: transparent !important;
}
.uppy-StatusBar-actionBtn--upload {
background-color: var(--accent) !important;
color: var(--secondary) !important;
border: none;
border-radius: 5px;
}
Embora pareça intimidador, a maior parte do nosso CSS aqui existe apenas para reestilizar o componente Dashboard do Uppy. Fora isso, estamos só usando uma paleta de cores gerada no Coolors.
Veja como a nossa página deve ficar agora:
JS
Agora vem a parte divertida! Depois do HTML, adicione o JavaScript a seguir dentro de uma tag
<script type="module">, substituindo os marcadores de Auth Key e Template ID pelos seus próprios valores.
import {
Uppy,
Dashboard,
Transloadit,
ImageEditor,
} from 'https://releases.transloadit.com/uppy/v3.3.1/uppy.min.mjs'
const nameInput = document.getElementById('name')
const status = document.getElementById('status')
function cardMessage(name) {
const recipient = name.trim()
return recipient ? `Happy Valentine's Day, ${recipient}!` : "Happy Valentine's Day!"
}
const uppy = new Uppy({
restrictions: {
maxNumberOfFiles: 1,
allowedFileTypes: ['image/*'],
},
})
.use(Dashboard, {
inline: true,
target: '#drag-drop-area',
})
.use(ImageEditor, {
target: Dashboard,
quality: 0.8,
cropperOptions: {
aspectRatio: 1 / 1, // Same aspect ratio as our overlay
},
})
.use(Transloadit, {
waitForEncoding: true,
getAssemblyOptions: () => ({
params: {
auth: { key: 'YOUR_AUTH_KEY' },
template_id: 'YOUR_TEMPLATE_ID',
},
fields: { message: cardMessage(nameInput.value) },
}),
})
uppy.on('transloadit:complete', (assembly) => {
const url = assembly.results.add_text?.[0]?.ssl_url
if (typeof url !== 'string') {
status.textContent = 'No card was returned. Please try again.'
return
}
const resultImg = document.getElementById('result')
resultImg.src = url
resultImg.hidden = false
status.textContent = 'Your card is ready.'
})
uppy.on('upload', () => {
document.getElementById('result').hidden = true
status.textContent = 'Creating your card.'
})
uppy.on('error', () => {
status.textContent = 'Card generation failed. Please try again.'
})
Aqui aproveitamos os componentes Dashboard, ImageEditor e Transloadit do Uppy e, felizmente, podemos usar as configurações padrão na maior parte dos casos. Vale notar, porém, que definimos a proporção da ferramenta de recorte do ImageEditor igual à da nossa imagem de sobreposição. No nosso caso, ela é 1:1.
A versão fixada do Uppy chama getAssemblyOptions quando um upload começa. Ela lê o nome atual,
então limpar o campo restaura a saudação genérica em vez de manter o destinatário anterior.
Conclusão
Junte o HTML, o CSS e o script de módulo, configure seu próprio Template e sirva a página localmente para testar. A captura de tela mostra o protótipo original; o código acima inclui a URL corrigida da marca-d’água, o tratamento da mensagem e o tratamento do resultado.
Por enquanto, é isso. Feliz Dia dos Namorados, e não deixe de enviar um cartão bonito e personalizado para aquela pessoa especial. E se você conseguiu levar as ferramentas usadas neste post ainda mais longe, adoraríamos saber no Twitter!