مفت Placeholder تصویر جنریٹر
حسب ضرورت جہتوں، متن، اور رنگوں کے ساتھ رنگین placeholder تصاویر بنائیں۔ سوشل میڈیا، mockups، اور ڈیزائن comps کے لیے معیاری سائزز۔
پیش سیٹ سائز
رنگ تھیمز
💡 HTML mockups کے لیے: 'data URL کے طور پر کاپی کریں' استعمال کریں اور inline placeholders کے لیے <img src="..."> میں پیسٹ کریں۔ Figma / Sketch ڈیزائنز کے لیے، PNG ڈاؤنلوڈ کریں اور اندر کھینچیں۔
عام استعمالات
- ڈیزائن Mockups کے لیے Placeholder اصورFigma، Sketch، یا ویب ڈیزائن mockups میں استعمال کے لیے sized رنگین باکسز بنائیں اس سے پہلے حقیقی اصور تیار ہوں۔
- HTML Prototypes کے لیے Inline PlaceholdersHTML میں directly placeholder images کو inline کرنے کے لیے 'Copy as data URL' استعمال کریں تیز prototypes کے لیے۔
- CMS Content Slots کے لیے PlaceholdersCMS template کو demonstrate کرتے وقت، حقیقی مواد کی جگہ placeholder images استعمال کریں حساس previews کے لیے۔
- سوشل میڈیا Image TemplatesInstagram، Facebook، Twitter، LinkedIn پوسٹ templates کے لیے correctly-sized placeholders بنائیں۔
- CSS Layout Testing Imagesresponsive CSS layouts کو stress-test کرنے کے لیے انتہائی aspect ratios میں images بنائیں۔
یہ کیسے کام کرتا ہے
سب کچھ آپ کے براؤزر میں HTML Canvas API اور ہاتھ سے لکھے گئے SVG مارک اپ کا استعمال کرتے ہوئے ہوتا ہے — کوئی سرور، کوئی اپ لوڈ، کوئی تیسرے فریق کی سروس نہیں۔ آپ طول و عرض، رنگ، اور لیبل متن مقرر کرتے ہیں، اور ٹول حقیقی وقت میں براہ راست تصویر کو کینوس ایلیمنٹ پر پینٹ کرتا ہے، پھر طلب پر اسے PNG، JPEG، یا SVG میں سیریلائز کرتا ہے۔
- 1طول و عرض اور رنگ ترتیب دیںچوڑائی اور اونچائی (1–4000 px ہر ایک) ٹائپ کریں، یا عام سوشل میڈیا اور ڈیزائن سائز کا احاطہ کرنے والے گیارہ پہلے سے طے شدہ اختیارات میں سے ایک چنیں۔ بلٹ ان تھیمز سے پس منظر اور متن کا رنگ منتخب کریں یا براہ راست کوئی بھی hex قدر درج کریں؛ ایک مقامی کلر پکر اور ایک تصدیق شدہ متنی فیلڈ ہم آہنگ رہتے ہیں۔
- 2Canvas API فوری پیش نظارہ رینڈر کرتا ہےایک React ایفیکٹ ہر تبدیلی پر drawPlaceholder() کو کال کرتا ہے۔ یہ فنکشن CanvasRenderingContext2D کا استعمال کرتے ہوئے مستطیل کو پس منظر کے رنگ سے بھرتا ہے، اختیاری طور پر 15% شفافیت پر مدھم ترچھی کراس ہیئر لائنیں کھینچتا ہے، پھر آپ کے لیبل متن کو ناپتا اور مرکز میں سیدھا کرتا ہے — فونٹ کو خود بخود سکیڑتا ہے یہاں تک کہ یہ کینوس کی چوڑائی کے 90% میں فٹ ہو جائے۔
- 3PNG، JPEG، یا SVG کے طور پر ایکسپورٹ کریںPNG اور JPEG ڈاؤن لوڈز canvas.toDataURL() کو کال کرتے ہیں، بیس64 نتیجے کو میموری میں Blob میں تبدیل کرتے ہیں، اور ڈاؤن لوڈ شروع کرتے ہیں — یہ سب صارف کے اشارے کے اندر ہم وقتی طور پر ہوتا ہے تاکہ iOS Safari کے ڈاؤن لوڈ قواعد پورے ہوں۔ SVG ایکسپورٹ ایک خودمختار SVG اسٹرنگ بناتا ہے جس میں مماثل rect، اختیاری ترچھی لائنیں، اور ایک متنی عنصر شامل ہوتا ہے، پھر اسے .svg فائل کے طور پر محفوظ کرتا ہے۔
- 4بیچ ایکسپورٹ اور کاپی شارٹ کٹس'تمام پہلے سے طے شدہ ڈاؤن لوڈ کریں' بٹن JSZip کو متحرک طور پر امپورٹ کرتا ہے، گیارہ پہلے سے طے شدہ سائزوں میں سے ہر ایک کو ایک آف اسکرین کینوس پر اسی ڈرا فنکشن کا استعمال کرتے ہوئے دوبارہ رینڈر کرتا ہے، اور تمام PNGs کو ایک ہی ZIP میں پیک کرتا ہے۔ کاپی بٹن ایک PNG ڈیٹا URL، ایک ان لائن SVG img ٹیگ، یا کوڈ میں فوری پیسٹ کے لیے CSS بیک گراؤنڈ-امیج اعلامیہ خارج کرتے ہیں۔
متعلقہ ٹولز
Lorem Ipsum جنریٹر
Lorem Ipsum placeholder متن بنائیں۔ الفاظ، جملے، یا پیراگراف منتخب کریں۔ ایک کلک میں کاپی کریں۔
تصویر کمپریسر
JPG، PNG، WebP اور AVIF تصاویر کمپریس کریں۔ پہلے/بعد کا موازنہ۔
امیج ریسائزر
ابعاد یا فیصد کے لحاظ سے تصاویر کا سائز تبدیل کریں۔ پہلو کا تناسب برقرار رکھیں، آؤٹ پٹ فارمیٹ کا انتخاب کریں، معیار کا کوئی نقصان نہیں۔