Image Storm API

Image Storm é uma API de edição de imagens desenvolvida em Laravel 11, que permite a criação e manipulação de imagens de forma programática. A API recebe um payload JSON com parâmetros como dimensões, cor de fundo e componentes (textos, imagens em base64 ou URLs). A saída é uma imagem PNG gerada com as especificações fornecidas.

Instalação

Siga os passos abaixo para instalar a aplicação:

1. Clone o repositório:

git clone https://github.com/vhratts/image-storm.git
    cd image-storm

2. Instale as dependências:

composer install

3. Configuração do arquivo .env:

Copie o arquivo de exemplo:

cp .env.example .env

Configure as variáveis de ambiente, como APP_KEY e detalhes de conexão com o banco de dados.

4. Gere a chave da aplicação:

php artisan key:generate

5. Configuração do servidor local:

php artisan serve

A aplicação estará acessível em http://localhost:8000.

Utilização da API

Endpoint

POST /api-service/image-editor

Parâmetros

A requisição deve ser enviada no corpo como application/json e conter os seguintes parâmetros:

• sample (object): Configurações principais da imagem.
  • width (int): Largura da imagem em pixels.
  • height (int): Altura da imagem em pixels.
  • background (string): Cor de fundo em hexadecimal.
• components (array): Lista de componentes.
  • overlay (int): Define a ordem de sobreposição (camadas).
  • position (object): Posição do componente.
    • x (int): Posição horizontal.
    • y (int): Posição vertical.
  • size (object): Tamanho do componente.
    • width (int): Largura em pixels.
    • height (int): Altura em pixels.
  • collors (object): Definição de cores.
    • background (string|null): Cor de fundo em hexadecimal.
    • content (string): Cor do conteúdo (texto).
  • content (object): Conteúdo do componente.
    • type (string): Tipo de conteúdo (text ou image/png).
    • content (string): Texto a ser exibido ou imagem (em Base64 ou URL).

Exemplo de Payload

{
        "sample": {
            "width": 300,
            "height": 720,
            "background": "#ffffff"
        },
        "components": [
            {
                "overlay": 0,
                "position": {
                    "x": 0,
                    "y": 0
                },
                "size": {
                    "width": 300,
                    "height": 100
                },
                "collors": {
                    "content": "#292929"
                },
                "content": {
                    "type": "text",
                    "content": "Texto no componente de imagem"
                }
            },
            {
                "overlay": 1,
                "position": {
                    "x": 300,
                    "y": 0
                },
                "size": {
                    "width": 300,
                    "height": 100
                },
                "content": {
                    "type": "image/png",
                    "content": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
                }
            }
        ]
    }

Exemplo de Uso com cURL

curl -X POST "http://localhost:8000/api-service/image-editor" \
    -H "Content-Type: application/json" \
    -d '{
        "sample": {
            "width": 300,
            "height": 720,
            "background": "#ffffff"
        },
        "components": [
            {
                "overlay": 0,
                "position": {
                    "x": 0,
                    "y": 0
                },
                "size": {
                    "width": 300,
                    "height": 100
                },
                "collors": {
                    "content": "#292929"
                },
                "content": {
                    "type": "text",
                    "content": "Texto no componente de imagem"
                }
            },
            {
                "overlay": 1,
                "position": {
                    "x": 300,
                    "y": 0
                },
                "size": {
                    "width": 300,
                    "height": 100
                },
                "content": {
                    "type": "image/png",
                    "content": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
                }
            }
        ]
    }'

Observações

A ordem de sobreposição dos componentes depende do valor de overlay, onde números mais altos indicam camadas superiores. Certifique-se de fornecer URLs válidos ou strings de Base64 corretamente formatadas para que as imagens sejam renderizadas com sucesso.