Crei una specifica per immagini segnaposto
Chieda un segnaposto da 640 × 360 e ottenga la misura della tela, i colori scritti sempre allo stesso modo, come #1A2B3C, e un'etichetta «640 × 360» centrata in 320, 180. Riservi lo spazio di ogni immagine in un layout prima che arrivi quella definitiva. Gratis nel suo browser.
- Gratis
- Funziona nel suo browser
- Senza registrazione
- I suoi dati restano sul dispositivo
Esegui gratis nel browser
Una specifica per immagini segnaposto è utile quando un layout richiede una geometria prevedibile prima che la grafica definitiva sia disponibile. Indichi larghezza e altezza positive in pixel e, facoltativamente, i colori esadecimali dello sfondo e del testo. Il risultato descrive l’area di disegno, i colori normalizzati e un’etichetta con le dimensioni collocata esattamente al centro.
Definisca l’area prima di costruire l’interfaccia
Inizi dalla larghezza e dall’altezza esatte che dovrà occupare l’immagine finale. Entrambi i valori sono espressi in pixel e devono essere numeri interi positivi, così la specifica rimane adatta ai normali flussi di lavoro per browser, design system e dati di prova. L’oggetto delle dimensioni restituito conserva tali valori senza ridimensionarli né ipotizzare un rapporto d’aspetto.
Il risultato può quindi fungere da contratto stabile tra il sistema di contenuti, che conosce lo spazio richiesto, e il renderer che in seguito convertirà la specifica in SVG, comandi canvas, CSS o un altro formato. Poiché questa capacità restituisce una descrizione anziché dati binari, Lei mantiene il controllo sul tipo di file, sulla compressione, sulla tipografia e sull’ambiente di rendering. Una scheda può richiedere una specifica orizzontale e un avatar una quadrata, ricevendo in entrambi i casi la stessa struttura prevedibile.
Le dimensioni nulle, negative, frazionarie, mancanti o non numeriche vengono respinte invece di essere corrette senza avviso, impedendo che dati di layout errati proseguano nella pipeline.
Scelga colori con valori esadecimali canonici
I colori dello sfondo e del testo sono facoltativi. Se Lei li omette, la specifica usa uno sfondo grigio chiaro neutro e un’etichetta grigio scuro, valori predefiniti pratici per un segnaposto. Ogni colore fornito deve adottare la notazione esadecimale CSS a tre, quattro, sei oppure otto cifre; il cancelletto iniziale è facoltativo.
Le forme brevi vengono estese e le lettere convertite in maiuscolo, così input equivalenti producono un unico valore canonico. Una forma abbreviata e la sua versione a sei cifre non generano quindi chiavi di cache o snapshot inutilmente diversi. I formati a quattro e otto cifre conservano le informazioni alfa per i renderer che supportano la trasparenza.
La capacità non accetta nomi di colore, gradienti, funzioni o token di design, perché dipendono da uno specifico ambiente di stile e ridurrebbero la portabilità. Inoltre non certifica il contrasto della coppia scelta. Se la leggibilità è importante, verifichi i colori normalizzati prima del rendering.
Gli errori indicano con chiarezza il campo che contiene un formato non supportato.
Renderizzi l’etichetta centrata in modo uniforme
Il testo dell’etichetta viene generato direttamente dalle dimensioni convalidate, nel consueto formato larghezza per altezza. La coordinata orizzontale è pari a metà della larghezza e quella verticale a metà dell’altezza, quindi dimensioni dispari possono produrre correttamente coordinate di mezzo pixel. Valori espliciti per l’allineamento orizzontale e verticale comunicano al renderer di ancorare l’etichetta al centro, invece di trattare le coordinate come origine in alto a sinistra.
In questo modo non vengono incorporate ipotesi su famiglia del carattere, dimensione, interlinea o misurazione del testo, che appartengono al livello di rendering. Un’implementazione web può associare i campi agli attributi di testo SVG, mentre una libreria grafica sul server può usare le stesse coordinate con le proprie opzioni di centratura. La specifica resta deterministica perché esegue soltanto convalida, normalizzazione e aritmetica.
Nessuna richiesta di rete, orologio, sorgente casuale o stato memorizzato influenza il risultato, rendendo la struttura adatta a test visivi, documentazione e dati dimostrativi.
Casi d'uso
Preparare layout responsivi
Crei specifiche coerenti per gli spazi immagine di schede, gallerie e banner prima che siano disponibili le risorse definitive.
Alimentare un renderer interno
Normalizzi dimensioni e colori prima di convertire il risultato in SVG, operazioni canvas o istruzioni grafiche sul server.
Stabilizzare i test visivi
Utilizzi coordinate deterministiche e colori canonici negli snapshot senza dipendere da un servizio esterno di immagini segnaposto.
Domande frequenti
Che cosa accade se i colori vengono omessi?
Lo sfondo usa #CCCCCC e l’etichetta #333333. Entrambi appaiono nel risultato nel formato normalizzato a sei cifre.
Quali formati di colore sono accettati?
Sono accettati colori CSS esadecimali a tre, quattro, sei oppure otto cifre, con o senza cancelletto iniziale.
Perché una coordinata centrale può contenere decimali?
Il centro matematico di una dimensione dispari cade tra i pixel, quindi la divisione per due produce correttamente mezzo pixel.
Crea anche il file dell'immagine segnaposto?
No. Descrive la tela, i colori e l'etichetta centrata senza disegnare, scaricare o salvare alcuna immagine. Chi la trasforma in immagine decide liberamente tipo di file, compressione e caratteri.
Controlla che il testo si legga bene sullo sfondo?
No, non garantisce che la coppia di colori rispetti uno standard di contrasto. Se la leggibilità conta, verifichi i due colori già uniformati con un controllo del contrasto prima di disegnare il segnaposto.
Strumenti correlati
Per sviluppatori — accesso via API
Tutto quello che vedi in questa pagina è disponibile anche via API. Questa sezione è per i team che vogliono integrarlo nei propri sistemi; chi non ne ha bisogno può semplicemente usare lo strumento qui sopra.
Endpoint
Autenticazione con Bearer token: un POST mette in coda l'attività e il risultato arriva via webhook o link firmato.
Chiamala dal tuo stack
curl -X POST https://api.kit.forhosting.com/image/placeholder-image-spec \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"width":640,"height":360}'const res = await fetch("https://api.kit.forhosting.com/image/placeholder-image-spec", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"width": 640,
"height": 360
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/placeholder-image-spec",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"width": 640,
"height": 360
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/placeholder-image-spec", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"width":640,"height":360}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"width":640,"height":360}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/placeholder-image-spec", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Esempio di richiesta
{
"width": 640,
"height": 360
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.placeholder_image_spec",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L'API è asincrona: ricevi subito un task_id e puoi fare polling fino a 1 richiesta al secondo.
Prezzi
Prezzo pubblicato, senza token né crediti. Se l'attività fallisce, non paghi.
Limiti
max_mb | 15 |
max_megapixels | 12 |
Errori
| HTTP | Codice | Significato |
|---|---|---|
401 | unauthorized | Chiave API mancante o non valida: controlla l'header Authorization. |
402 | insufficient_balance | Credito esaurito: ricarica per continuare a eseguire attività. |
404 | unknown_type | Tipo di attività sconosciuto: controlla il campo type della richiesta. |
429 | rate_limited | Troppe richieste in poco tempo: rallenta e riprova tra qualche secondo. |
Note tecniche
Non scarica, renderizza né memorizza immagini; pertanto, lo stesso input produce sempre lo stesso JSON compatto senza dipendere da servizi remoti.
Domande tecniche
Questa capacità crea un file immagine?
No. Restituisce una specifica JSON indipendente dal renderer che descrive l’area, i colori, il testo e la posizione centrale dell’etichetta.
Quanto costa una richiesta API?
Ogni richiesta API costa $0.002. Il calcolo non utilizza alcun servizio di rete esterno.