Bepul Joy Egallovchi Rasm Generatori

Qanday ishlaydi

Hammasi HTML Canvas API va qo'lda yozilgan SVG belgilash yordamida brauzeringizda sodir bo'ladi — server yo'q, yuklash yo'q, uchinchi tomon xizmati yo'q. Siz o'lcham, rang va yorliq matnini o'rnatasiz, asbob esa rasmni to'g'ridan-to'g'ri real vaqtda kanvas elementiga bo'yaydi, so'ng talab bo'yicha uni PNG, JPEG yoki SVG'ga serializatsiya qiladi.

1. 1
   O'lcham va ranglarni sozlang

   Kenglik va balandlikni yozing (har biri 1–4000 px), yoki umumiy ijtimoiy media va dizayn o'lchamlarini qamrab oluvchi o'n bir tayyor sozlamadan birini tanlang. O'rnatilgan mavzulardan fon va matn rangini tanlang yoki istalgan olti burchakli qiymatni to'g'ridan-to'g'ri kiriting; mahalliy rang tanlagich va tekshirilgan matn maydoni sinxron qoladi.
2. 2
   Canvas API ko'rib chiqishni darhol chizadi

   React effekti har bir o'zgarishda drawPlaceholder() ni chaqiradi. Bu funksiya to'rtburchakni fon rangi bilan to'ldirish, ixtiyoriy ravishda 15% shaffoflikda ochiq diagonal chiziqlarni chizish uchun CanvasRenderingContext2D'dan foydalanadi, so'ng yorliq matningizni o'lchaydi va markazga tekislaydi — kanvas kengligining 90% ichiga sig'guncha shriftni avtomatik kichraytiradi.
3. 3
   PNG, JPEG yoki SVG sifatida eksport

   PNG va JPEG yuklab olishlari canvas.toDataURL() ni chaqiradi, base64 natijasini xotirada Blob'ga o'giradi va yuklab olishni ishga tushiradi — hammasi iOS Safari'ning yuklab olish qoidalarini qondirish uchun foydalanuvchi harakati ichida sinxron. SVG eksporti mos rect, ixtiyoriy diagonal chiziqlar va text elementi bilan o'z-o'zicha to'liq SVG satrini quradi, so'ng uni .svg fayli sifatida saqlaydi.
4. 4
   Ommaviy eksport va nusxalash tezkorlari

   'Barcha tayyor sozlamalarni yuklab olish' tugmasi dinamik ravishda JSZip'ni import qiladi, o'n bitta tayyor sozlama o'lchamining har birini bir xil chizish funksiyasi yordamida ekrandan tashqari kanvasga qayta chizadi va barcha PNG'larni yagona ZIP'ga qadoqlaydi. Nusxalash tugmalari PNG ma'lumot URL'ini, inline SVG img tegini yoki kodga darhol joylashtirish uchun CSS background-image deklaratsiyasini chiqaradi.

Tegishli asboblar