Pulsuz Yer Tutucu Şəkil Generatoru
Xüsusi ölçülər, mətn və rənglərlə rəngli yer tutucu şəkillər yaradın. Sosial media, makecler və dizayn kompozisiyaları üçün standart ölçülər.
Əvvəlcədən təyin edilmiş ölçülər
Rəng temaları
💡 HTML maketi üçün: «Data URL kimi kopyala» seçimindən istifadə edin və daxili yer tutucu üçün <img src="..."> içinə yapışdırın. Figma / Sketch dizaynları üçün PNG-ni yükləyin və sürükləyin.
Ümumi istifadələr
- Dizayn Mockup-ları üçün Yer Tutucu ŞəkillərHəqiqi şəkillər hazır olmadığı halda Figma, Sketch və ya vebsayt dizayn mockup-larında istifadə edilməsi üçün ölçülü rəngli qutuları yaratın.
- HTML Prototypləri üçün Satırları Daxil Edin SaxlamaqSürətli prototyplər üçün HTML-ə birbaşa yer tutucu şəkilləri daxil etmək üçün 'Data URL olaraq Kopyala' istifadə edin.
- CMS Məzmun Yuvalarını Saxlamaq üçün Yer TutucuCMS şablonunu nümayiş etdirərkən, həssas ön baxışlar üçün həqiqi məzmun yerinə yer tutucu şəkilləri istifadə edin.
- Sosial Media Şəkil ŞablonlarıInstagram, Facebook, Twitter, LinkedIn yazı şablonları üçün düzgün ölçülü yer tutucular yaratın.
- CSS Düzəltmə Sınaq ŞəkilləriResponsiv CSS düzənini stress-test etmək üçün ekstrem en-boy nisbəti ilə şəkilləri yaratın.
Necə İşləyir
Hər şey HTML Canvas API və əl ilə yazılmış SVG işarələməsi istifadə edərək brauzerinizdə baş verir — server yoxdur, yükləmə yoxdur, üçüncü tərəf xidməti yoxdur. Ölçüləri, rəngləri və etiket mətnini təyin edirsiniz, alət isə şəkli real vaxtda birbaşa bir kanvas elementinə boyayır, sonra onu tələb olunduqda PNG, JPEG, ya da SVG-yə serializə edir.
- 1Ölçüləri və rəngləri konfiqurasiya edinBir en və hündürlük yazın (hər biri 1–4000 px), ya da ümumi sosial media və dizayn ölçülərini əhatə edən on bir hazır ayardan birini seçin. Qurulmuş temalardan bir fon və mətn rəngi seçin, ya da birbaşa istənilən hex dəyəri daxil edin; bir doğma rəng seçicisi və doğrulanmış bir mətn sahəsi sinxron qalır.
- 2Canvas API önizləməni ani olaraq render edirBir React effekti hər dəyişiklikdə drawPlaceholder()-i çağırır. Bu funksiya düzbucaqlını fon rəngi ilə doldurmaq, isteğe bağlı olaraq 15% şəffaflıqda solğun diaqonal çarpaz-tel xətlər çəkmək, sonra etiket mətninizi ölçmək və mərkəzə-uyğunlaşdırmaq üçün CanvasRenderingContext2D istifadə edir — kanvas eninin 90%-inə sığana qədər şrifti avtomatik-kiçildərək.
- 3PNG, JPEG, ya da SVG kimi ixrac edinPNG və JPEG endirmələri canvas.toDataURL()-u çağırır, base64 nəticəsini yaddaşda bir Blob-a çevirir və endirməni işə salır — hamısı iOS Safari-nin endirmə qaydalarının qarşılanması üçün istifadəçi hərəkəti daxilində sinxron olaraq. SVG ixracı uyğun bir düzbucaqlı, isteğe bağlı diaqonal xətlər və bir mətn elementi olan özünə-kifayət bir SVG sətri qurur, sonra onu bir .svg faylı kimi saxlayır.
- 4Kütləvi ixrac və kopyalama qısayolları'Bütün hazır ayarları endir' düyməsi JSZip-i dinamik olaraq idxal edir, eyni çəkmə funksiyasını istifadə edərək on bir hazır ayar ölçüsündən hər birini ekrandan-kənar bir kanvasa yenidən render edir və bütün PNG-ləri tək bir ZIP-ə paketləyir. Kopyala düymələri bir PNG data URL-i, bir inline SVG img etiketi, ya da bir CSS fon-şəkli bəyanatını koda dərhal yapışdırmaq üçün yaradır.
Əlaqəli Alətlər
Lorem Ipsum Generatoru
Lorem Ipsum yer tutucu mətni yaradın. Sözlər, cümlələr və ya paraqraflar seçin. Bir klikdə kopyalayın.
Şəkil Sıxışdırıcı
JPG, PNG, WebP və AVIF şəkillərini sıxışdırın. Əvvəl/sonra müqayisəsinə baxın.
Şəkil Ölçüsünü Dəyişdirici
Şəkillərin ölçüsünü ölçülərə və ya faizə görə dəyişdirin. Tərəflər nisbətini qoruyun, çıxış formatını seçin, keyfiyyət itkisi yoxdur.