Besplatan Generator zamjenskih slika

Kako radi

Sve se dešava u vašem pregledniku koristeći HTML Canvas API i ručno napisanu SVG oznaku — bez servera, bez slanja, bez usluge treće strane. Postavljate dimenzije, boje, i tekst oznake, a alat crta sliku direktno na canvas element u realnom vremenu, zatim je serijalizuje u PNG, JPEG, ili SVG na zahtjev.

1. 1
   Podesite dimenzije i boje

   Upišite širinu i visinu (1–4000 px svaka), ili odaberite jednu od jedanaest unaprijed postavljenih vrijednosti koje pokrivaju uobičajene veličine za društvene mreže i dizajn. Odaberite boju pozadine i teksta iz ugrađenih tema ili direktno unesite bilo koju heksadecimalnu vrijednost; native birač boje i validirano tekstualno polje ostaju sinhronizovani.
2. 2
   Canvas API trenutno iscrtava pregled

   React efekat poziva drawPlaceholder() pri svakoj promjeni. Ova funkcija koristi CanvasRenderingContext2D da popuni pravougaonik bojom pozadine, opciono nacrta blijede dijagonalne linije nišana na 15% providnosti, zatim mjeri i centralno poravnava vaš tekst oznake — automatski smanjujući font dok ne stane unutar 90% širine canvas-a.
3. 3
   Izvezite kao PNG, JPEG, ili SVG

   Preuzimanja PNG i JPEG pozivaju canvas.toDataURL(), pretvaraju base64 rezultat u Blob u memoriji, i pokreću preuzimanje — sve sinhrono unutar korisničke geste tako da su zadovoljena pravila preuzimanja iOS Safarija. SVG izvoz gradi samostalan SVG niz sa odgovarajućim rect, opcionim dijagonalnim linijama, i text elementom, zatim ga čuva kao .svg datoteku.
4. 4
   Grupni izvoz i prečice za kopiranje

   Dugme 'Preuzmi sve unaprijed postavljene vrijednosti' dinamički uvozi JSZip, ponovo iscrtava svaku od jedanaest unaprijed postavljenih veličina na skriveni canvas koristeći istu funkciju crtanja, i pakuje sve PNG-ove u jedan ZIP. Dugmad za kopiranje emituju PNG data URL, inline SVG img oznaku, ili CSS background-image deklaraciju za trenutno lijepljenje u kod.

Povezani alati