Hogyan hozhatok létre egy pontosan adott méretű helyőrző képet?

Írja be a Szélesség (px) és Magasság (px) értékeket, válasszon színeket vagy egy Színtémát, majd kattintson a PNG letöltése, JPG letöltése vagy SVG letöltése gombra. Alapértelmezés szerint a kép a méreteit jeleníti meg feliratként, például 800 x 600.

Mekkora a legnagyobb helyőrző kép, amit generálhatok?

A szélességnek és magasságnak egyenként 1 és 4000 pixel között kell lennie. Az ezen a tartományon kívül eső értékek a következő hibát mutatják: A szélesség és magasság 1 és 4000 px között kell lennie.

Hogyan helyezhetek el egy helyőrző képet közvetlenül HTML-ben fájl nélkül?

Kattintson a Másolás Data URL-ként gombra, és illessze be egy img tag src értékeként. Használhatja a HTML kódrészlet másolása vagy a CSS háttér másolása opciót is. Nincs szükség külső képtárhelyre.

Generálhatok szabványos közösségi média vagy webes méreteket?

Igen. Az Előre beállított méretek között megtalálható az Instagram bejegyzés, Instagram történet, Twitter kártya, Open Graph, YouTube miniatűr, Facebook borító és E-mail fejléc. Az Az összes előbeállítás letöltése (ZIP) mind a tizenegyet PNG fájlként menti el.

Hogyan tehetek saját szöveget vagy átlós vonalakat a helyőrzőre?

Írjon be egy feliratot az Egyéni szöveg mezőbe, például Hőskép, a méretek megjelenítése helyett. Jelölje be az Átlós vonalak megjelenítése (X) opciót halvány átlók rajzolásához. A hosszú szöveg automatikusan összezsugorodik, hogy elférjen a szélességben.

Igen. Minden eszköz ingyenesen használható, fiók és bankkártya nélkül. A munka a szervereink helyett a te eszközödön fut, ezért maradhat ingyenes a használata.

Igen. Az iOS és Android jelenlegi mobilböngészőiben fut, telepítés nélkül.

🖼️

Ingyenes Helyőrző kép generátor

Generálj színes helyőrző képeket egyéni méretekkel, szöveggel és színekkel. Szabványos méretek közösségi médiához, makettekhez és design composokhoz.

A böngésződben futNincs regisztráció, nincs felugró ablakNem szükséges bejelentkezésÖrökre ingyenes

Szélesség (px)

Magasság (px)

Előre beállított méretek

Színtémák

Háttér

Szöveg / vonalak

Egyéni szöveg (hagyd üresen a méretekhez)

Méreteket jelenít meg, ha nincs egyéni szövegÁtlós vonalak megjelenítése (X)

💡 HTML makettekhez: használd a „Másolás Data URL-ként" opciót és illeszd be az <img src=\"...\"> elembe beágyazott helyőrzőkhöz. Figma / Sketch tervekhez töltsd le a PNG-t és húzd be.

Gyakori felhasználások

Helyőrző képek a tervezési makettekhezHozzon létre méretezett színes négyzeteket a Figma, Sketch vagy webtervezési makettekhez, mielőtt az igazi képek elkészülnének.
Beágyazott helyőrzők HTML prototípusokhozHasználjon Másolás adatként URL-ként helyőrzőképeket közvetlenül a HTML-be a gyors prototípusokhoz.
Helyőrzők CMS tartalomnégyzetekhezA CMS sablon bemutatásakor helyőrzőképeket használjon valódi tartalom helyett az érzékeny előnézetekhez.
Közösségi média képsablonokHozzon létre megfelelő méretű helyőrzőket az Instagram, Facebook, Twitter, LinkedIn bejegyzéssablonokhoz.
CSS elrendezés tesztképeiSzélsőséges képarányú képek generálása az érzékeny CSS elrendezések stressz teszteléséhez.

Hogyan működik

Minden a böngésződben zajlik a HTML Canvas API és kézzel írt SVG jelölés segítségével — nincs szerver, nincs feltöltés, nincs külső szolgáltatás. Beállítod a méreteket, a színeket és a szöveges címkét, az eszköz pedig valós időben rárajzolja a képet egy canvas elemre, majd igény szerint PNG-vé, JPEG-gé vagy SVG-vé szerializálja.

1
Méretek és színek beállítása
Add meg a szélességet és a magasságot (1–4000 px), vagy válassz a tizenegy gyakori közösségimédia- és tervezési méretpreset közül. Válassz háttér- és szövegszínt a beépített témák közül, vagy add meg közvetlenül a hexértéket; egy natív színválasztó és egy ellenőrzött szövegmező szinkronban marad.
2
A Canvas API azonnal rendereli az előnézetet
Egy React effektus minden változáskor meghívja a drawPlaceholder() függvényt. Ez a CanvasRenderingContext2D-t használja a téglalap kitöltéséhez a háttérszínnel, opcionálisan halvány, 15%-os átlátszóságú átlós vonalakat rajzol, majd megméri és középre igazítja a szöveges címkét — automatikusan zsugorítva a betűméretet, amíg a vászon szélességének 90%-ába nem fér.
3
Exportálás PNG, JPEG vagy SVG formátumban
A PNG és JPEG letöltések a canvas.toDataURL() metódust hívják meg, a base64 eredményt a memóriában Blobbá alakítják, és letöltést indítanak — mindezt szinkron módon, a felhasználói gesztuson belül, hogy az iOS Safari letöltési szabályai teljesüljenek. Az SVG-exportálás egy önálló SVG-karakterláncot épít fel egy megfelelő téglalappal, opcionális átlós vonalakkal és egy szövegelemmel, majd .svg fájlként menti.
4
Kötegelt exportálás és másolási gyorsbillentyűk
A "Minden preset letöltése" gomb dinamikusan importálja a JSZipet, ugyanazzal a rajzoló függvénnyel újrarenderel mind a tizenegy preset méretet egy láthatatlan vászonra, és az összes PNG-t egyetlen ZIP-be csomagolja. A másoló gombok PNG adat-URL-t, beágyazott SVG img taget vagy CSS background-image deklarációt állítanak elő, azonnali kódba illesztéshez.