Documentação da API

Como usar a Snap API para criar screenshots profissionais

v1.0.0

Introdução

A Snap API permite criar screenshots profissionais e estilizados de websites em segundos. Adicione bordas arredondadas, gradientes, mockups de navegador, sombras e muito mais - tudo através de uma API simples e poderosa.

Fácil de usar

Apenas uma URL para começar

Rápido

Screenshots em menos de 5s

Gratuito

Sem limites ou cadastro

Exemplos Básicos

POST
Screenshot Simples

// JavaScript
const response = await fetch('/api/snap', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    url: 'https://github.com'
  })
});

const data = await response.json();
console.log(data.imageUrl); // Base64 image data

# cURL
curl -X POST http://localhost:3001/api/snap \
  -H "Content-Type: application/json" \
  -d '{"url": "https://github.com"}'

Endpoints da API

POST
`/api/snap`

Gera screenshot estilizado usando configuração JSON (recomendado)

Request Body

{
  "url": "https://example.com",     // Obrigatório
  "screenshot": {                   // Opcional
    "viewport": {
      "width": 1920,               // 320-4096
      "height": 1080,              // 240-4096
      "isMobile": false
    },
    "colorScheme": "dark",          // "light" | "dark"
    "delay": 2000                   // 0-10000ms
  },
  "style": {                       // Opcional
    "borderRadius": 15,            // 0-50px
    "margin": 40,                  // 0-200px
    "browserMockup": "safari",     // "safari" | "chrome" | "firefox" | "edge" | "none"
    "background": {
      "type": "gradient",          // "solid" | "gradient"
      "direction": "to-br",        // Direção do gradiente
      "colors": [
        { "color": "#667eea", "position": 0 },
        { "color": "#764ba2", "position": 100 }
      ]
    },
    "shadow": {
      "enabled": true,
      "blur": 20,                  // 0-50px
      "offsetY": 10                // -50 a 50px
    }
  }
}

Response

{
  "success": true,
  "imageUrl": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA...",
  "metadata": {
    "originalUrl": "https://example.com",
    "processedAt": "2023-12-07T10:30:00.000Z",
    "dimensions": {
      "width": 1984,
      "height": 1144
    }
  }
}

GET
`/api/snap`

Gera screenshot usando query parameters (para integração simples)

Exemplo

// URL completa
http://localhost:3001/api/snap?url=https://github.com&borderRadius=15&margin=40&background.type=gradient&background.direction=to-br&browserMockup=safari&shadow.enabled=true

// JavaScript
const imageUrl = '/api/snap?' + new URLSearchParams({
  url: 'https://github.com',
  borderRadius: '15',
  margin: '40',
  'background.type': 'gradient',
  'background.direction': 'to-br',
  browserMockup: 'safari',
  'shadow.enabled': 'true'
});

GET
`/api/preview`

Visualiza o screenshot em uma página HTML com opções de download

// Abrir no navegador
http://localhost:3001/api/preview?url=https://github.com&borderRadius=15&margin=40

// HTML response com preview interativo
<!DOCTYPE html>
<html>
  <body>
    <img src="data:image/png;base64,..." />
    <button onclick="download()">Download PNG</button>
  </body>
</html>

Referência de Parâmetros

Configurações de Screenshot

Parâmetro	Tipo	Default	Descrição
viewport.width	integer	1920	Largura do viewport (320-4096px)
viewport.height	integer	1080	Altura do viewport (240-4096px)
colorScheme	string	dark	"light" \| "dark"
delay	integer	2000	Delay adicional em ms (0-10000)

Configurações de Estilo

Parâmetro	Tipo	Default	Descrição
borderRadius	integer	8	Bordas arredondadas (0-50px)
margin	integer	32	Margem externa (0-200px)
browserMockup	string	none	"safari" \| "chrome" \| "firefox" \| "edge" \| "none"
shadow.enabled	boolean	true	Ativar sombra

Status Codes

200

Sucesso

Screenshot gerado com sucesso

400

Bad Request

Parâmetros inválidos ou URL malformada

503

Service Unavailable

Serviço temporariamente indisponível