DiceBear: ไลบรารี Avatar ฟรีและ Open Source

ถ้าคุณเคยต้องใช้รูป Avatar สำหรับโปรเจกต์ — ไม่ว่าจะเป็นหน้าโปรไฟล์ผู้ใช้ ส่วนคอมเมนต์ หรือแอปแชท — คุณอาจจะเคยนึกถึง Gravatar หรือบริการสุ่มรูปภาพ แต่วันนี้จะมาแนะนำตัวเลือกที่ดีกว่า: DiceBear

DiceBear เป็น ไลบรารี Avatar ฟรี, Open Source และเน้นความเป็นส่วนตัว มีสไตล์ SVG มากกว่า 30 แบบ ออกแบบโดยศิลปินมืออาชีพ จุดเด่นคือสร้าง Avatar แบบ Deterministic — ใส่ข้อมูลเดิม ได้ Avatar เดิมทุกครั้ง ไม่ต้องเก็บข้อมูลผู้ใช้เลย

ขอแนะนำ ไม่ได้ขาย แต่ใช้แล้วดีจริง

หลักการทำงาน

แนวคิดง่ายมาก: ส่ง seed (ชื่อผู้ใช้, อีเมล, ID หรือ string อะไรก็ได้) เข้าไป แล้ว DiceBear จะสร้าง Avatar ที่ไม่ซ้ำใคร seed เดิม = Avatar เดิม ทุกครั้ง

ทำให้ DiceBear เหมาะมากสำหรับระบบโปรไฟล์ผู้ใช้ที่ต้องการ Avatar ที่คงที่โดยไม่ต้องเก็บไฟล์รูปภาพ

สไตล์ที่มีให้เลือก (30+ แบบ)

DiceBear มีสไตล์ Avatar ให้เลือกมากกว่า 30 แบบ แบ่งเป็น 2 หมวดหลัก คือ Minimalist (แนวมินิมอล) และ Characters (แนวตัวละคร)

ตัวอย่างสไตล์ยอดนิยม:

• Glass — กระจกสีสันสดใส สไตล์มินิมอล
• Icons — ไอคอนเรียบง่าย
• Identicon — รูปแบบเฉพาะตัวคล้าย GitHub identicon
• Initials — ตัวอักษรย่อ เหมาะกับแอปธุรกิจ
• Shapes — รูปทรงเรขาคณิต Abstract
• Adventurer — ตัวละครวาดมือน่ารัก
• Avataaars — การ์ตูนแนวคน หลากหลายฟีเจอร์
• Bottts — หุ่นยนต์ เหมาะกับแพลตฟอร์มเทค
• Big Smile — ตัวละครยิ้มร่าเริง
• Pixel Art — พิกเซลอาร์ตสไตล์เรโทร
• Lorelei — เส้นสายมินิมอล สวยงาม
• Micah — ภาพประกอบแนว Flat ทันสมัย

สามารถดูสไตล์ทั้งหมดได้ที่ หน้า Styles

Playground — ลองเล่นได้เลย

DiceBear มี Playground ที่สามารถเลือกสไตล์ ปรับแต่งค่าต่างๆ และดูตัวอย่าง Avatar แบบ real-time

ใน Playground สามารถปรับค่าต่างๆ ได้เช่น:

• Flip — กลับด้านซ้ายขวา
• Rotate — หมุนองศา
• Scale — ขนาด
• Radius — ความโค้งมน
• Background Color — สีพื้นหลัง

ลองเล่นได้ที่ dicebear.com/playground

การใช้งานผ่าน HTTP API

วิธีที่ง่ายที่สุดคือใช้ผ่าน HTTP API ฟรี แค่สร้าง URL ตามรูปแบบนี้:

https://api.dicebear.com/9.x/{style}/{format}?seed={seed}

ตัวอย่างเช่น สร้าง Avatar สไตล์ Adventurer ในรูปแบบ SVG:

https://api.dicebear.com/9.x/adventurer/svg?seed=Felix

ใช้ใน <img> tag ได้เลยทันที:

<img src="https://api.dicebear.com/9.x/adventurer/svg?seed=Felix" alt="Avatar" />

รองรับหลายฟอร์แมต: svg, png, jpg, webp, avif, json

พารามิเตอร์สำหรับปรับแต่ง

ปรับแต่ง Avatar ได้ผ่าน URL parameters:

https://api.dicebear.com/9.x/adventurer/svg?seed=Felix&size=128&radius=50&backgroundColor=b6e3f4

• size — ขนาดกว้าง x สูง (พิกเซล)
• radius — ความโค้งมน (0-50)
• backgroundColor — สีพื้นหลัง (hex ไม่ต้องใส่ #)
• flip — กลับด้านซ้ายขวา
• rotate — หมุน (องศา)

การใช้งานผ่าน JavaScript Library

สำหรับคนที่ต้องการควบคุมมากขึ้น ติดตั้งผ่าน npm:

npm install @dicebear/core @dicebear/collection

จากนั้นสร้าง Avatar ในโค้ด:

import { createAvatar } from "@dicebear/core";
import { adventurer } from "@dicebear/collection";

const avatar = createAvatar(adventurer, {
  seed: "Felix",
  // ปรับแต่งเพิ่มเติม
  size: 128,
  radius: 50,
});

const svg = avatar.toString();
const dataUri = avatar.toDataUri();

สามารถ export เป็น PNG, JPEG หรือฟอร์แมตอื่นได้:

const png = await avatar.png().toArrayBuffer();

การใช้งานผ่าน CLI

DiceBear มี CLI tool ให้ใช้ด้วย:

npx @dicebear/cli generate adventurer --seed Felix --format svg --output ./avatar.svg

ตัวอย่างการใช้งานจริง

• ระบบสมัครสมาชิก — สร้าง Avatar เริ่มต้นจากชื่อผู้ใช้ ทำให้ผู้ใช้ใหม่มีรูปโปรไฟล์ทันที
• แอปแชท — กำหนด Avatar ที่ไม่ซ้ำกันให้ผู้ใช้ที่ไม่ระบุตัวตนหรือแขก
• ส่วนคอมเมนต์ — แสดง Avatar ที่แตกต่างกันสำหรับผู้แสดงความคิดเห็น โดยไม่ต้องสร้างบัญชี
• Development/Testing — ใส่ Avatar ในข้อมูลจำลองให้ดูสมจริง
• แดชบอร์ดทีม — ใช้สไตล์ Initials สำหรับเครื่องมือภายในองค์กร

ทำไมต้อง DiceBear?

สถิติการใช้งาน

DiceBear ได้รับความนิยมอย่างกว้างขวาง:

• 1B+ API requests ต่อเดือน
• 3TB+ ข้อมูลที่ส่งผ่าน CDN ต่อเดือน
• 120K+ npm downloads ต่อสัปดาห์
• 8.2K+ GitHub stars

1 พันล้าน request ต่อเดือน ไม่ธรรมดาเลยอ่า

เริ่มต้นใช้งาน

สำหรับการนำไปใช้จริง แค่ใส่ URL ของ API ลงใน <img> tag — แค่นี้เลย ไม่ต้อง API key ไม่ต้องสมัคร ไม่มีค่าใช้จ่าย

<img
  src="https://api.dicebear.com/9.x/adventurer/svg?seed=YourUsername"
  alt="User Avatar"
  width="64"
  height="64"
/>

ดูเอกสารเพิ่มเติมได้ที่ dicebear.com และซอร์สโค้ดบน GitHub

เจอ DiceBear มาจากเพื่อนร่วมงานบอกต่อกันมาอีกที ไม่งั้นคงไม่รู้จักแน่ๆ 😅 ส่วนตัวชอบมากเพราะมันแก้ปัญหาที่ดูเล็กน้อยแต่กวนใจมาก — ระบบโปรไฟล์ที่ไม่มีรูปก็ดูไม่สมบูรณ์ แต่จะให้ผู้ใช้ทุกคนอัปโหลดรูปก็ยุ่งยาก DiceBear จัดการเรื่องนี้ได้สะอาดมาก ไม่ต้องเก็บไฟล์ ไม่ต้องสมัคร แค่ส่ง seed เข้าไปแล้วได้ Avatar ออกมาเลย บางทีของดีมันง่ายแค่นี้เอง