Placeholder სურათის გენერატორი უფასოდ
გენერირება გაუკეთეთ ფერადი placeholder სურათებს მორგებული განზომილებებით, ტექსტით და ფერებით. სტანდარტული ზომები სოციალური მედიისთვის, მაკეტებისთვის და დიზაინის comp-ებისთვის.
წინასწარ განსაზღვრული ზომები
ფერის თემები
💡 HTML მაკეტებისთვის: გამოიყენეთ «Data URL-ად კოპირება» პარამეტრი და ჩასვით <img src="...">-ში ჩაშენებული შემმცვლელებისთვის. Figma / Sketch დიზაინებისთვის ჩამოტვირთეთ PNG და ჩათრიეთ.
გავრცელებული გამოყენება
- ღირებულებ mockup-ი ჩანახი სურათიაამანი sized ბოთლი Figma, Sketch ან ვებ დაკარგული mockup-ი realnothing ფოტო მოუცემელი.
- HTML mockup-ი ჩანახი ხელიგამოყენება 'Copy as data URL' რომ ჩაკეტოს ჩანახი სურათი directly HTML სწრაფი prototypes.
- CMS content Slot-ი ჩანახიCMS template აჩვენებს, გამოყენება ჩანახი სურათი realnothing content ტკიპ აჩვენებს.
- სოციალური მედია სურათი Template-იაამანი correctly sized ჩანახი Instagram, Facebook, Twitter, LinkedIn post template-ი.
- CSS ის სიტყვა სურათიაამანი სურათი extreme ასპექტი თანაფარდობა რომ stress-test responsive CSS დაკარგული.
როგორ მუშაობს
ყველაფერი თქვენს ბრაუზერში ხდება HTML Canvas API-სა და ხელით დაწერილი SVG მარკირების გამოყენებით — სერვერის, ატვირთვის ან მესამე-მხარის სერვისის გარეშე. თქვენ ადგენთ განზომილებებს, ფერებსა და ეტიკეტის ტექსტს, და ხელსაწყო სურათს პირდაპირ canvas ელემენტზე ხატავს, რეალურ დროში, შემდეგ მოთხოვნისამებრ სერიალიზებას ატარებს PNG, JPEG ან SVG-ად.
- 1დააკონფიგურირეთ განზომილებები და ფერებიაკრიფეთ სიგანე და სიმაღლე (1–4000 px თითოეული), ან აირჩიეთ თერთმეტი პრესეტიდან, რომლებიც გავრცელებულ სოციალურ მედიისა და დიზაინის ზომებს ფარავს. აირჩიეთ ფონისა და ტექსტის ფერი ჩაშენებული თემებიდან, ან შეიყვანეთ ნებისმიერი თექვსმეტობითი მნიშვნელობა პირდაპირ; ბუნებრივი ფერის ამომრჩეველი და ვალიდირებული ტექსტის ველი სინქრონში რჩება.
- 2Canvas API მყისვე რენდერს ატარებს გადახედვაზეReact-ის ეფექტი იძახებს drawPlaceholder()-ს ყოველ ცვლილებაზე. ეს ფუნქცია CanvasRenderingContext2D-ს იყენებს, მართკუთხედის ფონის ფერით შესავსებად, არასავალდებულოდ 15% გამჭვირვალობით ცისკროსული დიაგონალური ხაზების დასახატად, შემდეგ ზომავს და ცენტრში ალაგებს თქვენს ეტიკეტის ტექსტს — შრიფტს ავტომატურად ამცირებს, სანამ canvas-ის სიგანის 90%-ს არ ჩაეტევა.
- 3გამოტანა PNG, JPEG ან SVG-ადPNG და JPEG ჩამოტვირთვები იძახებს canvas.toDataURL()-ს, base64 შედეგს ბლობად აქცევს მეხსიერებაში, და იწყებს ჩამოტვირთვას — ყველაფერი სინქრონულად, მომხმარებლის ჟესტის შიგნით, iOS Safari-ს ჩამოტვირთვის წესების დასაცავად. SVG გამოტანა აშენებს თვითკმარ SVG სტრიქონს, შესატყვისი მართკუთხედით, არასავალდებულო დიაგონალური ხაზებითა და ტექსტის ელემენტით, შემდეგ ინახავს .svg ფაილად.
- 4მასობრივი გამოტანა და კოპირების მალსახმობები„ყველა პრესეტის ჩამოტვირთვის“ ღილაკი დინამიურად იმპორტირებს JSZip-ს, ხელახლა ხატავს ყოველ თერთმეტ პრესეტ ზომას ეკრანს-მიღმა canvas-ზე, იმავე ხატვის ფუნქციის გამოყენებით, და ყველა PNG-ს ერთ ZIP-ად ალაგებს. კოპირების ღილაკები გამოსცემენ PNG მონაცემთა URL-ს, ხაზშიდა SVG img ტეგს ან CSS background-image დეკლარაციას, კოდში პირდაპირ ჩასასმელად.
დაკავშირებული ინსტრუმენტები
Lorem Ipsum გენერატორი
გენერირება გაუკეთეთ Lorem Ipsum შევსების ტექსტს. აირჩიეთ სიტყვები, წინადადებები ან აბზაცები. დააკოპირეთ ერთი დაჭერით.
გამოსახულების კომპრესორი
შეკუმშეთ JPG, PNG, WebP და AVIF სურათები. იხილეთ შედარება ადრე/შემდეგ.
სურათის ზომის შემცვლელი
შეცვალეთ სურათები ზომების ან პროცენტების მიხედვით. შეინარჩუნეთ ასპექტის თანაფარდობა, აირჩიეთ გამომავალი ფორმატი, ხარისხის დაკარგვის გარეშე.