Tạo avatar mặc định theo tên viết tắt như Google, icon, profile, first, letter, (ok)
https://viblo.asia/p/tao-avatar-mac-dinh-theo-ten-viet-tat-nhu-google-trong-ung-dung-laravel-Eb85ogx652G
Giới thiệu
Chào mọi người, chắc các bạn đã quá quen thuộc với các avatar mặc định của Google
. Bạn có thể nhận thấy, các ảnh avatar mặc định này khá là thú vị, nó được tạo theo tên viết tắt của mỗi tài khoản người dùng. Và hôm nay, trong bài viết này mình sẽ hướng dẫn các bạn tạo các ảnh avatar theo tên viết tắt như vậy trong ứng dụng Laravel
bằng package laravolt/avatar
.
Cài đặt
Chạy lệnh sau để cài đặt laravolt/avatar
:
Đối với Laravel >= 5.2
Đối với Laravel < 5.2
Service Provider & Facade
Từ phiên bản Laravel 5.5 trở đi thì laravolt/avatar
sẽ được tìm thấy tự động (auto-discovery). Ngược lại đối với các phiên bản Laravel < 5.5, bạn cần thêm providers và aliases cho laravolt/avatar
trong file config/app.php
:
Sử dụng
Tạo ảnh dưới dạng dữ liệu Base64:
Dòng code này sẽ tạo một ảnh với 2 chữ viết tắt của tên mà bạn đã truyền vào (ở đây mình truyền vào là "Peter Paker", vậy kết quả sẽ là "PP") và chuyển ảnh đã tạo thành dữ liệu
Base64
, bạn có thể hiển thị dữ liệu này thành hình ảnh thông qua thuộc tínhsrc
của thẻimg
như sau:Lưu ảnh thành file:
Bạn có thể lưu ảnh thành file với phương thức
save()
. Bạn còn có thể tùy chỉnh chất lượng ảnh với tham sốquanlity
(có giá trị từ 0 - 100), giá trị mặc định là 90.Tạo ảnh dưới dạng SVG:
Phương thức
toSvg()
sẽ tạo ảnh dạng svg, bạn chỉ cần copy và paste dòng lệnh này vào nơi bạn muốn hiển thị ảnh.
Một số cấu hình
Bạn hãy chạy lệnh sau để tạo file cấu hình config/laravolt/avatar.php
của laravolt/avatar
:
Mở file này lên, ta có thể thấy được tất các các tùy chọn cấu hình cơ bản. Một số tùy chọn quan trọng:
height
vàwidth
: thiết lập chiều cao và chiều rộng của ảnh.ascii
: Giá trị mặc định làfalse
, mặc địnhlaravolt/avatar
sẽ lấy các chữ cái đầu của từ để tạo tên viết tắt, tuy nhiên đối với các kí tự Non-ASCII (ā, Ě, ǽ, ...) thìlaravolt/avatar
sẽ phụ thuộc vào font đã thiết lập, nếu font này có hỗ trợ thì sẽ hiển thị, ngược lại thì không. Nếu giá trị của tùy chọn này được thiết lập làtrue
thìlaravolt/avatar
sẽ tự động thay thế các kí tự thành các kí tự ASCII gần nhất (ví dụ "Ě" sẽ thay thế thành "E", "á" sẽ thành "a", ...).shape
: thiết lập hình dạng ảnh ("circle" - hình tròn hoặc "square" - hình vuông). Mặc đình là hình tròn, nhưng các bạn nên thiết lập thành hình vuông rồi dùng css để thay đổi hình dạng mà mình mong muốn.chars
: Số kí tự tối đa của tên viết tắt, giá trị mặc định là 2.backgrounds
vàforegrounds
: Thiết lập màu nền và màu chữ, mặc định là một mảng các giá trị màu sắc,laravolt/avatar
sẽ lấy ngẫu nhiên một giá trị trong mảng này để tạo màu nền và màu chữ cho ảnh.Ngoài ra còn có các tùy chọn thiết lập khác như
fonts
,fontSize
,border
, ...
Một số phương thức hỗ trợ
Trong nhiều trường hợp, bạn muốn tạo ảnh với các giá trị thiết lập khác mặc định mà không muốn thay đổi file config/laravolt/avatar.php
. Để giải quyết vấn đề đó laravolt/avatar
còn cung cấp cho chúng ta một số phương thức:
Thiết lập kích thước ảnh với
setDimension()
:Thiết lập màu nền với
setBackground()
:Thiết lập màu chữ với
setForeground()
:Thiết lập font với
setFont()
:Thiết lập hình dạng ảnh với
setShape()
:.... (Xem thêm các phương thức khác tại đây)
Bạn có thể thiết lập cùng lúc nhiều giá trị bằng cách nối các phương thức với nhau:
Ngoài ra bạn còn có thể lấy một đối tượng Image
với phương thức getImageObject()
, phương thức này sẽ trả về một thể hiện của Intervention image để bạn có thể sử dụng cho các mục đích khác.
Ứng dụng vào Laravel
Tạo migration:
Ở đây mình sẽ tạo một bảng users đơn giản với các trường name, email, password và avatar:
Bạn hãy chạy lệnh sau để tạo bảng nhé:
Tạo model:
Tạo một model
App\Models\User.php
như sau:Tạo ảnh avatar mặc định:
Mình sẽ
append
thêm vào model thuộc tínhavatar_path
để chứa đường dẫn avatar của user. Đồng thời mình sẽ sử dụngAccessors
để lấy giá trị của thuộc tính này.Accessors
này có nhiệm vụ kiểm tra xem thuộc tínhavatar
của user có rỗng hay không, nếu rỗng thì sẽ tạo và trả về một avatar mặc định theo tên viết tắt của user, ngược lại sẽ trả về avatar hiện tại của user. Bạn hãy thêm đoạn code sau đây vào fileApp\Models\User.php
:Sử dụng:
Bạn chỉ cần gọi
$user->avatar_path
ở thuộc tínhsrc
của thẻimg
ở bất kì view nào mà bạn muốn hiển thị avatar của user:Kết quả demo:
Nhìn nó khá là thú vị và giống với Google
phải không các bạn, với các avatar như thế này, ứng dụng web của bạn sẽ chuyên nghiệp hơn, gây thiện cảm với người dùng hơn là việc dùng 1 ảnh nào đó để thiết lập avatar mặc định. Không chỉ là users bạn còn có thể dùng nó để tạo avatar tên viết tắt cho teams, groups,... Trong demo này mình chỉ sử dụng laravolt/avatar
thông qua một Accessors
đơn giản, tuy nhiên bạn có thể tùy biến sử dụng theo cách của riêng bạn.
Tuy package này được phát triển cho Laravel, tuy nhiên bạn còn có thể sử dụng nó vào các ứng dụng Php khác (xem thêm tại đây)
Kết luận
Qua bài viết này, mình đã giới thiệu và hướng dẫn cho các bạn cách tạo ảnh avatar mặc định theo tên viết tắt trong ứng dụng Laravel
thông qua laravolt/avatar
. Đây là một package đơn giản nhưng vô cùng thú vị.
Hy vọng bài viết của mình sẽ giúp ích cho các bạn .
Tham khảo
Last updated