😎 Tạo avatar "sang chảnh" cho người dùng chỉ bằng... cái tên – Laravolt/Avatar style!

0 0 0

Người đăng: Tun Tun

Theo Viblo Asia

😎 Tạo avatar "sang chảnh" cho người dùng chỉ bằng... cái tên – Laravolt/Avatar style!

🥸 Tại sao cần avatar?

Bạn có một hệ thống đăng ký người dùng. Mỗi người đều có tên. Nhưng danh sách người dùng hiện toàn là chữ cái — nhìn chán như nồi canh nhạt. Bạn muốn thêm tí màu mè, muốn hệ thống trông “xịn mịn” như LinkedIn, nhưng... làm biếng thiết kế avatar từng người?

Thì Laravolt/Avatar là cứu tinh! Nó sẽ:

  • Tạo avatar đẹp lung linh từ chính tên người dùng
  • Avatar có màu mè sinh động, chữ cái đầu tiên nổi bật
  • Có thể xuất base64, SVG, ảnh PNG, thậm chí cả Gravatar
  • Và tất nhiên là có thể... “tùy biến đậm chất nghệ”

image.png

🎨 Cách cài đặt – nhanh gọn lẹ như gói mì 3s

composer require laravolt/avatar

Laravel 5.5 trở lên thì không cần đăng ký service provider. Còn bạn dùng Laravel 5.1-5.4:

'providers' => [ Laravolt\Avatar\ServiceProvider::class,
],
'aliases' => [ 'Avatar' => Laravolt\Avatar\Facade::class,
],

Bạn dùng Lumen? Cũng chơi được!

$app->register(Laravolt\Avatar\LumenServiceProvider::class);

✨ Tạo avatar đơn giản như... ăn kẹo

echo Avatar::create('Nguyễn Văn A')->toBase64();

Thế là bạn có avatar với chữ "NA", màu nền tự random, màu chữ trắng — nhìn “auto chuyên nghiệp”. Bạn gắn vào thẻ <img> là xong:

<img src="{{ Avatar::create('Nguyễn Văn A')->toBase64() }}" />

💾 Lưu ảnh về server

Avatar::create('Trần Thị B')->save('public/avatar.png');

Bạn còn có thể đổi định dạng .jpg, chọn chất lượng nữa.

Avatar::create('Trần Thị B')->save('avatar.jpg', 90);

🎭 Ứng dụng thực tế trong dự án

Bạn có danh sách học sinh, nhân viên, khách hàng… 1000 người? Bạn muốn bảng danh sách trông "đỡ buồn ngủ"? Avatar initials là thứ giúp:

  • Người dùng dễ phân biệt nhau hơn
  • Giao diện có “màu”
  • Không cần upload ảnh thật (nhất là... ảnh thẻ xấu 😆)

image.png

🧬 Tùy biến sâu sắc – bạn là nghệ sĩ!

Bạn muốn:

  • Đổi kích thước avatar?
  • Đổi hình dạng tròn/square?
  • Font chữ riêng?
  • Màu nền thương hiệu? image.png Cách làm:
Avatar::create('Tun Tun') ->setDimension(120) ->setFontSize(60) ->setBackground('#00BCD4') ->setForeground('#FFFFFF') ->setFont('/path/to/cool.ttf') ->setShape('square') ->save('cool-tun.png');

Kết quả: Một avatar đầy “tính cách” mang thương hiệu riêng!

🐱‍🏍 Themes – auto ngầu không cần code nhiều

Avatar::create('Julie')->setTheme('grayscale-dark')->toSvg();

Hoặc random trong 2 theme:

Avatar::create('Julie')->setTheme(['grayscale-dark', 'colorful']);

Bạn lười thiết kế theme? Có sẵn:

  • colorful – đủ sắc cầu vồng
  • grayscale-light – sáng sủa, nhẹ nhàng
  • grayscale-dark – xịn xò, ngầu lòi

🧪 Thí nghiệm vui: tạo 10.000 avatar!

for ($i = 0; $i < 10000; $i++) { $name = "User $i"; Avatar::create($name)->save("avatars/user_$i.png");
}

Kết quả:

  • Chạy xong ~20s
  • Chiếm 200MB (ảnh PNG full màu)
  • Hệ thống “trông như Facebook nội bộ”

💀 Non-ASCII thì sao?

Tên như “José”, “Łukasz”, “Đặng” sẽ hiển thị ra sao?

Bạn có thể cấu hình:

'ascii' => true

Nó sẽ convert thành “Jose”, “Lukasz”, “Dang”. Nếu không, avatar có thể... mất chữ 😅 tùy font bạn chọn.

🛠 Kết hợp với Intervention Image – nâng cấp cấp độ "pro"

Bạn muốn thêm hiệu ứng?

$image = Avatar::create('Coder')->getImageObject();
$image->blur(5)->save('blur.png');

Bạn đã có avatar có chữ “CO”... được làm mờ như nghệ sĩ indie.

😍 Tổng kết: Khi nào nên dùng?

✅ Bạn có ứng dụng có user nhưng không muốn quản lý file ảnh

✅ Muốn hệ thống có màu sắc ngay từ đầu

✅ Muốn hiển thị tên người dùng một cách ngắn gọn

✅ Muốn tiết kiệm thời gian dev nhưng vẫn "đẹp trai dev thần thánh" image.png

😈 Bonus: Hack vui

$colors = ['#000000', '#FF0000', '#00FF00', '#0000FF'];
$name = '🤪🤪🤪'; foreach ($colors as $color) { Avatar::create($name)->setBackground($color)->save("avatar_$color.png");
}

Kết quả: Emoji avatar với 4 màu nền khác nhau – vui tươi, trẻ trung, “rất Gen Z” 😆


Đừng để bảng danh sách người dùng của bạn trông như file Excel!

Hãy cho nó màu sắc. Hãy để Laravolt làm điều đó. Và bạn thì… tiếp tục uống cafe 😎

Bình luận

Bài viết tương tự

- vừa được xem lúc

Tìm hiểu về Resource Controller trong Laravel

Giới thiệu. Trong laravel, việc sử dụng các route post, get, group để gọi đến 1 action của Controller đã là quá quen đối với các bạn sử dụng framework này.

0 0 462

- vừa được xem lúc

Phân quyền đơn giản với package Laravel permission

Như các bạn đã biết, phân quyền trong một ứng dụng là một phần không thể thiếu trong việc phát triển phần mềm, dù đó là ứng dụng web hay là mobile. Vậy nên, hôm nay mình sẽ giới thiệu một package có thể giúp các bạn phân quyền nhanh và đơn giản trong một website được viết bằng PHP với framework là L

0 0 545

- vừa được xem lúc

Sử dụng Swagger để xây dựng API documentation

Giới thiệu về Swagger. RESTful API là một tiêu chuẩn dùng trong việc thiết kế API cho các ứng dụng web (thiết kế Web services) để tiện cho việc quản lý các resource.

0 0 1.1k

- vừa được xem lúc

Ví dụ CRUD với Laravel và Vuejs.

1. Cài đặt Laravel. composer create-project --prefer-dist laravel/laravel vuelaravelcrud. .

0 0 171

- vừa được xem lúc

Một số tips khi dùng laravel (Part 1)

1. Show database query in raw SQL format. DB::enableQueryLog(); // Bật tính năng query logging. DB::table('users')->get(); // Chạy truy vấn bạn muốn ghi log.

0 0 104

- vừa được xem lúc

Inertiajs - Xây dựng Single Page App không cần API

Tiêu đề là mình lấy từ trang chủ của https://inertiajs.com/ chứ không phải mình tự nghĩ ra đâu nhé :v. Lâu lâu rồi chưa động tới Laravel (dự án cuối cùng mình code là ở ver 5.8), thế nên một ngày đẹp trời lượn vào đọc docs ver 8.

0 0 252