प्लेसहोल्डर अवतार API

विकास और प्रोडक्शन दोनों के लिए मुफ़्त, बिना की वाले प्लेसहोल्डर अवतार। इमेज टैग में URL डालें और कुछ सौ बाइट में साफ़-सुथरा निश्चित SVG पाएँ। न कुछ साइन-अप करना है, न कुछ इंस्टॉल करना है।

https://blankpfp.com/api/avatar

लाइव उदाहरण

नीचे दी गई हर इमेज इस पेज में बताए गए एंडपॉइंट से लाइव सर्व हो रही है।

त्वरित शुरुआत

URL सीधे इमेज टैग में डाल दें। आकार पिक्सेल में होते हैं और डिफ़ॉल्ट आकार गोल है, इसलिए अलग से स्टाइल की ज़रूरत नहीं।

<img src="https://blankpfp.com/api/avatar/seed/alice/200" alt="Alice" width="200" height="200">

या इसे CSS बैकग्राउंड की तरह इस्तेमाल करें:

.avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background-image: url("https://blankpfp.com/api/avatar/seed/alice/96");
  background-size: cover;
}

JavaScript में यूज़र की पहचान बनाने वाले किसी भी मान से URL बनाएँ:

avatar.src = 'https://blankpfp.com/api/avatar/seed/' + encodeURIComponent(user.email) + '/200';

URL संरचना

चारों रूप वैकल्पिक ऊँचाई स्वीकार करते हैं। किसी भी में .json जोड़कर इमेज के बजाय नीचे बताया गया मेटाडेटा पाएँ।

URL	आपको क्या मिलेगा
`/api/avatar/{width}`	वर्गाकार अवतार। एक ही URL हमेशा एक ही इमेज देता है।
`/api/avatar/{width}/{height}`	वर्गाकार नहीं कैनवास, चौड़े बैनर या स्टोरी अवतार के लिए उपयोगी।
`/api/avatar/seed/{seed}/{width}`	किसी भी सीड स्ट्रिंग से बना निश्चित अवतार।
`/api/avatar/id/{id}/{width}`	संख्यात्मक आईडी से बना निश्चित अवतार, जैसे डेटाबेस की कोई पंक्ति।

निश्चित सीड

सीड को 48 रंगों की पैलेट में किसी एक रंग में हैश किया जाता है, इसलिए वही सीड हमेशा वही अवतार देता है — न डेटाबेस चाहिए, न डिस्क पर कुछ सेव। आप यूज़रनेम, ईमेल पता या रिकॉर्ड आईडी इस्तेमाल कर सकते हैं। जिन सीड में रिक्त स्थान या चिह्न हों उन्हें प्रतिशत-एन्कोड करना होता है, और /api/avatar/id/ संख्यात्मक आईडी का संक्षिप्त रास्ता है।

<img src="https://blankpfp.com/api/avatar/seed/alice/200" alt="alice">\n<img src="https://blankpfp.com/api/avatar/seed/bob/200" alt="bob">\n<img src="https://blankpfp.com/api/avatar/id/237/200" alt="record 237">

क्वेरी पैरामीटर

सभी पैरामीटर वैकल्पिक हैं और एक साथ इस्तेमाल किए जा सकते हैं। कोई अनजान मान मिलने पर टूटी इमेज के बजाय JSON समझाने के साथ 400 लौटता है।

पैरामीटर	स्वीकृत मान	डिफ़ॉल्ट	आपको क्या मिलेगा
`shape`	circle \| rounded \| square	circle	अवतार का किनारा। गोला डिफ़ॉल्ट है क्योंकि ज़्यादातर प्लेटफ़ॉर्म प्रोफ़ाइल फ़ोटो को गोला काटते हैं।
`pattern`	solid \| grid \| dots \| diagonal \| checker	solid	पृष्ठभूमि पर बनाया गया टेक्स्चर। अलग-अलग प्लेसहोल्डर को एक नज़र में पहचानने में मदद करता है।
`bg`	#1E3A5F	seed	पृष्ठभूमि रंग। यह सीड के चुने रंग को ओवरराइड कर देता है।
`fg`	#1E3A5F	auto	आरंभाक्षरों, पैटर्न रेखाओं या सिल्हटेट का रंग; न दिए जाने पर कंट्रास्ट के लिए अपने आप चुनी जाती है।
`initials`	1-2	-	बीच में अधिकतम दो अक्षर, अंक या चिह्न। पूरा नाम अपने आरंभाक्षरों में सिकुड़ जाता है।
`figure`	1-15	-	सिल्हटेट की आईडी (1-15) या नाम, fg रंग से bg के ऊपर बनाया जाता है। आरंभाक्षरों से पहले आता है, और अकेला ?figure इसे हटा देता है।
`outline`	0 \| 1	0
`grayscale`	0 \| 1	0	सारा रंग हटा देता है। फीकी या बंद इंटरफ़ेस स्थितियों के लिए उपयोगी।
`blur`	0-10	0	गॉसियन धुँधलेपन की त्रिज्या। धुँधलापन आकृति के अंदर ही रहता है, इसलिए किनारे साफ़ रहते हैं।
`random`	?random=*	-	कोई भी मान। स्थिर अवतार के बजाय हर मान पर अलग अवतार देता है।

हेक्स रंग # के साथ या बिना दोनों तरह से लिखे जा सकते हैं, और #abc जैसा तीन अंकों का छोटा रूप भी बढ़ा दिया जाता है। bg के बिना पृष्ठभूमि सीड से आती है; fg के बिना स्याही अपने आप चुनी जाती है ताकि पढ़ा जा सके। धुँधलापन सीमा से ऊपर हो तो उसे अस्वीकार करने के बजाय सीमा पर ला दिया जाता है, और आरंभाक्षर कभी दो अक्षरों से ज़्यादा नहीं होते।

सिल्हटेट

जनरेटर वाले वही पंद्रह अर्ध-शरीर सिल्हटेट, आईडी या नाम से बुलाए जा सकते हैं। fg सिल्हटेट का रंग है और bg पृष्ठभूमि का, इसलिए एक ही आईडी हर पैलेट में अलग दिखती है।

Solid fill

Hollow outline (outline=1)

आज़माएँ

इस पेज पर कोई भी अवतार चुनें, फिर नीचे पैरामीटर बदलें। प्रीव्यू और कोड तुरंत अपडेट होते हैं, और आप जो कॉपी करते हैं वही एंडपॉइंट लौटाता है।

पूर्वावलोकन

आकार बनावट आद्याक्षर

पृष्ठभूमि स्वतः

अग्रभूमि स्वतः

धुँधला 0 Outline ग्रेस्केल

URL

उत्तर के प्रारूप

इमेज SVG में लौटाती हैं, जिससे सामान्य अवतार 200 से 1000 बाइट के बीच रहता है और किसी भी पिक्सेल घनत्व पर तेज़ दिखता है। उसी URL पर .json जोड़कर उसके बजाय निश्चित रंग पढ़ें, जिससे आस-पास के इंटरफ़ेस को अवतार से मेल खाने में मदद मिलती है।

{
  "ok": true,
  "mode": "seed",
  "seed": "alice",
  "width": 200,
  "height": 200,
  "shape": "circle",
  "pattern": "solid",
  "figure": null,
  "background": "#9CA3AF",
  "foreground": "#111827",
  "initials": null,
  "outline": false,
  "grayscale": false,
  "blur": 0,
  "format": "svg",
  "bytes": 266,
  "url": "https://blankpfp.com/api/avatar/seed/alice/200/200.svg",
  "info": "https://blankpfp.com/api/avatar/seed/alice/200/200.json"
}

अमान्य अनुरोधों का उत्तर 400 और JSON बॉडी के साथ आता है:

{
  "ok": false,
  "error": "invalid_parameters",
  "errors": ["pattern: expected one of solid, grid, dots, diagonal, checker"],
  "docs": "https://blankpfp.com/docs"
}

कैश और सीमाएँ

सीड वाले URL पते के शुद्ध फलन होते हैं, इसलिए वे एक साल की अपरिवर्तनीय कैश हेडर और ETag के साथ दिए जाते हैं। अपने ऐप के आगे CDN लगा दें और पहले अनुरोध के बाद इमेज की लागत शून्य हो जाती है। चौड़ाई और ऊँचाई 16 से 2048 पिक्सेल तक हो सकती है; बड़े मान अस्वीकार करने के बजाय सीमा पर लाए जाते हैं, और अंतिम आकार JSON में मिलता है। हर अनुरोध पर अलग इमेज दिखाने के लिए ?random= के बाद कोई भी मान जोड़ें।

अक्सर पूछे जाने वाले सवाल

क्या मुझे API की या खाते की ज़रूरत है?

नहीं। न पंजीकरण है, न की, न कोटा। जब तक साइट ऑनलाइन है, इस पेज का हर URL ज्यों का त्यों चलता है।

क्या एक ही URL हमेशा एक ही अवतार देगा?

हाँ। सीड वाला URL पते का शुद्ध फलन है, इसलिए उसे अपने मार्कअप, डेटाबेस या टेस्ट में सीधे लिखा जा सकता है। बिना सीड वाले URL भी अपने पते के हिसाब से स्थिर रहते हैं, और ?random= इस व्यवहार से साफ़ तौर पर बाहर निकलने का तरीका है।

क्या मैं इन इमेज को लिंक करके व्यावसायिक रूप से इस्तेमाल कर सकता हूँ?

हाँ। इमेज हमारे अपने सर्वर पर वेक्टर आकृतियों से बनती हैं, इसलिए न किसी तीसरे पक्ष की फ़ोटो है, न लाइसेंस का सवाल, न क्रेडिट देने की ज़रूरत। इन्हें सीधे लिंक करें या डाउनलोड कर लें।

SVG ही क्यों, और आकार की सीमा क्या है?

SVG अवतार आम तौर पर कुछ सौ बाइट का होता है, किसी भी स्क्रीन घनत्व पर बढ़ता है और CSS से रंग बदला जा सकता है। चौड़ाई और ऊँचाई 16 से 2048 पिक्सेल तक हो सकती है; इससे बड़ा मान 2048 पर लाया जाता है।