Cum creez o imagine substituent de o dimensiune exactă?

Introdu Lățime (px) și Înălțime (px), alege culori sau o Temă de culoare, apoi apasă Descarcă PNG, Descarcă JPG sau Descarcă SVG. Implicit, imaginea afișează dimensiunile sale, de exemplu 800 x 600, ca etichetă.

Care este cea mai mare imagine substituent pe care o pot genera?

Lățimea și înălțimea trebuie să fie fiecare între 1 și 4000 de pixeli. Valorile din afara acestui interval afișează eroarea Lățimea și înălțimea trebuie să fie între 1 și 4000 px.

Cum pun o imagine substituent direct în HTML, fără un fișier?

Apasă Copiază ca Data URL și lipește-l într-o etichetă img ca valoare src. Poți folosi și Copiază fragment HTML sau Copiază fundal CSS. Nu e nevoie de găzduire externă a imaginii.

Pot genera dimensiuni standard pentru social media sau web?

Da. Dimensiunile prestabilite includ Postare Instagram, Poveste Instagram, Card Twitter, Open Graph, Miniatură YouTube, Copertă Facebook și Antet email. Descarcă toate preseturile (ZIP) salvează toate cele unsprezece ca fișiere PNG.

Cum pun propriul text sau linii diagonale pe substituent?

Scrie o etichetă în Text personalizat, de exemplu Hero image, în loc să afișezi dimensiunile. Bifează Afișează linii diagonale (X) pentru a desena diagonale subtile. Textul lung se micșorează automat pentru a se potrivi lățimii.

Da. Fiecare unealtă este gratuită, fără cont și fără card de credit. Procesarea se face pe dispozitivul tău, nu pe serverele noastre, ceea ce ne permite să le oferim gratuit.

Funcționează pe mobil?

Da. Funcționează în browserele mobile actuale de pe iOS și Android, fără nimic de instalat.

🖼️

Generator Imagini Substituent — gratuit

Generează imagini substituent colorate cu dimensiuni, text și culori personalizate. Dimensiuni standard pentru rețele sociale, machete și compoziții de design.

Rulează în browserFără înregistrare, fără ferestre pop-upFără autentificare necesarăGratuit pentru totdeauna

Lățime (px)

Înălțime (px)

Dimensiuni prestabilite

Teme de culoare

Fundal

Text / linii

Text personalizat (lasă gol pentru dimensiuni)

Afișează dimensiunile dacă nu există text personalizatAfișează linii diagonale (X)

💡 Pentru machete HTML: folosește opțiunea „Copiază ca Data URL" și lipește în <img src="..."> pentru substituenți inline. Pentru design-uri Figma / Sketch, descarcă PNG-ul și trage-l înăuntru.

Utilizări frecvente

Imagini substituent pentru mockup-uri de designGenerare cutii colorate dimensionate pentru utilizare în Figma, Sketch sau mockup-uri de design web înainte ca imaginile reale să fie gata.
Substituenți încorporați pentru prototipuri HTMLUtilizați Copiere ca URL de date pentru a încorpora imagini substituent direct în HTML pentru prototipuri rapide.
Substituenți pentru sloturi de conținut CMSCând demonstrezi un șablon CMS, utilizează imagini substituent în loc de conținut real pentru previzualizări sensibile.
Șabloane de imagini pentru rețelele socialeGenerare substituenți de dimensiuni corecte pentru Instagram, Facebook, Twitter, șabloane de postare LinkedIn.
Imagini de test al disp. CSSGenerați imagini la rapoarte de aspect extreme pentru testul de stres al dispozitivelor CSS receptive.

Cum funcționează

Totul se întâmplă în browser-ul tău folosind API-ul HTML Canvas și markup SVG scris manual — fără server, fără încărcare, fără serviciu terță parte. Setezi dimensiuni, culori, și text de etichetă, iar unealta pictează imaginea direct pe un element canvas în timp real, apoi o serializează la PNG, JPEG, sau SVG la cerere.

1
Configurează dimensiunile și culorile
Scrie o lățime și înălțime (1–4000 px fiecare), sau alege una din cele unsprezece presetări care acoperă dimensiuni comune de social media și design. Alege o culoare de fundal și text din temele integrate sau introdu orice valoare hex direct; un selector de culoare nativ și un câmp de text validat rămân sincronizate.
2
API-ul Canvas randează previzualizarea instant
Un efect React apelează drawPlaceholder() la fiecare schimbare. Această funcție folosește CanvasRenderingContext2D pentru a umple dreptunghiul cu culoarea de fundal, opțional desenează linii diagonale palide de reper la opacitate 15%, apoi măsoară și centrează textul tău de etichetă — micșorând automat fontul până se încadrează în 90% din lățimea canvas-ului.
3
Exportă ca PNG, JPEG, sau SVG
Descărcările PNG și JPEG apelează canvas.toDataURL(), convertesc rezultatul base64 la un Blob în memorie, și declanșează descărcarea — totul sincron în interiorul gestului utilizatorului astfel încât regulile de descărcare ale iOS Safari sunt satisfăcute. Exportul SVG construiește un șir SVG autonom cu un rect corespunzător, linii diagonale opționale, și un element text, apoi îl salvează ca fișier .svg.
4
Export în lot și scurtături de copiere
Butonul 'Descarcă toate presetările' importă dinamic JSZip, rerandază fiecare din cele unsprezece dimensiuni presetate pe un canvas în afara ecranului folosind aceeași funcție de desenare, și împachetează toate PNG-urile într-un singur ZIP. Butoanele de copiere emit un URL de date PNG, o etichetă img SVG inline, sau o declarație CSS background-image pentru lipire imediată în cod.