Screenshots instantâneos e fáceis de sites via CDN da Transloadit

Joseph Grabski

Líder de conteúdo · Rochester, Reino Unido · Mostrar biografia

No blog de hoje, vamos dar uma olhada rápida na CDN da Transloadit e no Robot /html/convert. Vamos usar uma expressão de Assembly Variable para decodificar uma URL fornecida no caminho da requisição e, em seguida, servir o screenshot pela CDN.

Vamos criar um pequeno Template para tirar um screenshot de um site, que depois pode ser alterado dinamicamente e apresentado ao usuário em segundos. Vamos começar!

Nosso Template

{
  "steps": {
    "screenshot_page": {
      "robot": "/html/convert",
      "format": "png",
      "fullpage": false,
      "delay": 100,
      "url": "${decodeURIComponent(fields.input)}"
    },
    "served": {
      "use": "screenshot_page",
      "robot": "/file/serve"
    }
  }
}

Isso é tudo de que precisamos no nosso Template para gerar a prévia de um site. Nosso primeiro Step screenshot_page vai tirar um screenshot de qualquer URL que fornecermos a ele.

A expressão decodeURIComponent(fields.input) decodifica a URL fornecida no caminho da requisição; ela é uma expressão de Assembly Variable, e não um Robot /script/run separado. Em essência, transformamos https%3A%2F%2Ftransloadit.com%2Fpricing%2F em https://transloadit.com/pricing/.

Em seguida, usamos o Robot /file/serve para fazer upload da prévia do site para a nossa CDN, permitindo que o resultado seja acessado de qualquer lugar do mundo num piscar de olhos.

Demonstração

URL do site

Fazer uma captura de tela

Carregando pré-visualização…

https://my-app.tlcdn.com/webshot/https%3A%2F%2Ftransloadit.com%2Fpricing%2F⁠

Insira uma URL pública HTTP ou HTTPS e envie o formulário para solicitar um screenshot. Sites que exigem autenticação ou bloqueiam navegadores automatizados podem não gerar uma prévia utilizável. Os resultados ficam em cache, então, se gerar uma URL levar alguns segundos na primeira tentativa, a segunda tentativa pode ser servida a partir do cache. A latência real depende do site de destino, da rede e do estado do cache.

Isso é tudo para o nosso pequeno blog de hoje! Espero que você tenha gostado desta rápida olhada no uso da CDN da Transloadit. Fique à vontade para experimentar o Template e adicionar seus próprios parâmetros.