CĂN BẢN
DOM & BOM
XỨ LÝ FORM
JAVASCRIPT TIPS
TUTORIALS
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Viết chức năng tạo ảnh đại diện theo tên như Google với Javascript và PHP

Chào các bạn, chào mừng các bạn đã quay trở lại với Freetuts. Hôm nay, mình sẽ hướng dẫn các bạn viết chức năng tạo ảnh đại diện theo tên như Google bằng Javascript và PHP. Chức năng này đang phổ biến với các trang mạng xã hội, forum hiện nay. Nếu bạn chán ghét với những ảnh đại diện mặc định, quá giống nhau. Đã có giải pháp, với chức năng này nó có thể tạo ngay một ảnh đại diện theo tên mà người dùng đăng ký tài khoản. OK, không nó dài dòng nữa chúng ta bắt tay vào việc thôi!

1. Nguyên lý hoạt động

Đây là sơ đồ hoạt động của ứng dụng này :

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

action create avt with name jpg

Đầu tiên mình sẽ lấy giá trị họ và tên mà người dùng nhập để vẽ lên canvas, sau đó mình lấy dữ liệu canvas bằng hàm .toDataURL()(Cái này các bạn có thể tham khảo trên Google) rồi dùng Ajax để gửi tới file PHP để nhận dữ liệu, xử lý và tạo ảnh.

Giờ chúng ta tiến hành xây dựng chức năng nhé!

2. Xây dựng chức năng

Viết HTML

Đầu tiên các tạo file index.php và copy đoạn code này vào :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Tạo avatar theo tên với Javascript và PHP &bull; Freetuts.net</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<style>

	</style>
</head>
<body>
	<div class="box-create-avt">
		<h2>Tạo ảnh theo tên</h2>
		<form method="POST" id="formCreateAvt" onsubmit="return false;">
			<input type="text" placeholder="Họ" id="first_name">
			<input type="text" placeholder="Tên" id="last_name">
			<button id="submit_form_signup">Tạo ảnh</button>
			<div class="clearfix"></div>
		</form>
		<canvas id="canvas" width="80" height="80"></canvas>
	</div>
	<script src="http://code.jquery.com/jquery.js"></script>
	<script>
		
	</script>
</body>
</html>
Trong đó: 

  • .box-create-avt là div chứa toàn bộ chức năng này.
  • #formCreateAvt là form gửi dữ liệu họ và tên để vẽ canvas.
    • #first_name là field họ.
    • #last_name là field tên.
    • #submit_form_signup là nút submit.
  • #canvas là canvas mình sẽ vẽ ảnh đại diện lên đó, các bạn có thể chọn kích thước tuỳ ý nhé miễn nó vuông thì ảnh đại diện mà, ở đây mình dùng kích thước là 80x80.
  • Cặp thẻ style là nơi mình sẽ code CSS ở bên trong(Xem ở phần Viết CSS bước 2).
  • Cặp thẻ script cuối cùng là nơi mình sẽ viết JS(Xem ở phần viết Javascript bước 2).

Viết CSS

Đây là code giao diện đơn giản cho chức năng này, các bạn copy đoạn code sau và paste vào bên trong cặp thẻ style:

* {padding: 0; margin: 0; color: #333; font-size: 14px;}
.clearfix {clear: both;}
.box-create-avt {width: 300px; max-width: 100%; margin: 20px auto; text-align: center;}
.box-create-avt h2 {color: #333; font-weight: normal; font-size: 30px;}
.box-create-avt input[type=text] {float: left; margin-top: 10px; width: calc(50% - 16px); outline: 0; border: 1px solid #ccc; padding: 5px 7px; color: #333;}
.box-create-avt #last_name {border-left: 0;}
.box-create-avt button {background-color: #428bca; color: #fff; padding: 5px 7px; font-size: 14px; border: 1px solid #428bca; margin-top: 10px; cursor: pointer; outline: 0;}
#canvas {margin-top: 100px;}
Nếu các bạn không thích giao diện này thì có thể tự code cũng được :)

Viết Javascript

Về phần này thì yêu cầu các bạn phải có một chút kiến thức về HTML5 canvas, nếu bạn nào chưa biết thì có thể tham khảo series HTML5 canvas ngay trên blog luôn.

Các bạn copy nội dung dưới đây và dán vào bên trong cặp thẻ script cuối cùng rồi mình sẽ giải thích:

// Bắt sự kiện khi click vào nút Tạo tài khoản
$('#submit_form_signup').on('click', function() {
	// Lấy giá trị gán vào các biến và xử lý
	$first_name = $('#first_name').val().substr(0, 1).toUpperCase();
	$last_name = $('#last_name').val().substr(0, 1).toUpperCase();
			
	// Nếu field họ hoặc tên để trống
	if ($first_name == '' || $last_name == '')
	{
		alert('Vui lòng nhập họ tên !');
	}
	// Ngược lại
	else
	{
		// Khai báo các biến canvas
		var canvas = document.getElementById('canvas');
	        var context = canvas.getContext('2d');

	        // Lấy x, y căn giữa canvas
	        var x = canvas.width / 2;
	        var y = canvas.height / 2;

	   	// Phủ màu cho canvas
	        context.rect(0, 0, 80, 80);
	        context.fillStyle = "#428bca";
		context.fill();

		// Viết tắt họ và tên lên canvas
	        context.font = "30px Arial";
	        context.textAlign = "center";
	        context.fillStyle = "white";
	        context.fillText($first_name + $last_name, x, y + 10);

	        dataAvt = canvas.toDataURL(); // Lấy dữ liệu canas

	   	// Gửi dữ liệu canvas
	        $.ajax({
                   type: "POST", // Phương thức
                   url: "create_avt.php", // Đường dẫn
               // Dữ liệu
              data: { 
                   dataAvt: dataAvt
              }
              // Nếu gửi dữ liệu thành công
              }).done(function() {
                    alert('Tạo ảnh thành công !');
              });
	}	
});
Giải thích:

Đầu tiên mình bắt sự kiện khi người dùng click vào nút "Tạo tài khoản".

  • Lấy giá trị họ và tên gán vào các biến và xử lý bằng các hàm :
    • substr(0, 1) đế lấy chữ cái đầu tiên của chuỗi.
    • toUpperCase() để in hoa chuỗi.
  • Kiểm tra xem 2 field họ và tên có để trống không.
    • Nếu có : thông báo lỗi.
    • Nếu không thì sẽ vẽ canvas và gửi đi.
      • Ở dòng context.fillText($first_name + $last_name, x, y + 10); số 10 này có thể thay đổi theo height của canvas, nếu các bạn không cho height 80 thì chỉnh sửa số 10 này thành số khác để nó căn giữa chữ theo height nhé!
      • Còn về màu sắc chữ; màu nền; font, size chữ thì các bạn có thể thay đổi tuỳ ý miễn font size phù hợp với kích thước canvas.

Bây giờ các bạn có thể chạy thử rồi đấy, nếu không có lỗi xảy ra thì nó sẽ có kết quả như thế này :

demo javascript create avt with name jpg

Tiếp theo là chúng ta sẽ viết PHP để nhận dữ liệu canvas, xử lý và lưu ảnh.

Viết PHP

Các bạn tạo file create_avt.php cùng cấp với file index.php và copy đoạn code này vào :

<?php
	// Nhận dữ liệu canvas
	$avt = $_POST['dataAvt'];

	// Tìm kiếm và thay thế đường dẫn ảnh
	$avt = str_replace('data:image/png;base64,', '', $avt); 
	$avt = str_replace(' ', '+', $avt);

	$fileData = base64_decode($avt); // Mã hoá file dạng Base64

	// Tạo tên ảnh ngẫu nhiên để không bị trùng lặp 
	$charName = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
	$randName = substr(str_shuffle($charName), 0, 15);

	// Đường dẫn thư mục ảnh
	$fileName = 'avts/' . $randName . '.png';

	// Đặt dữ liệu canvas vào file ảnh
	file_put_contents($fileName, $fileData);
?>
Bên trong mình đã giải thích rồi nên mình sẽ không nói nữa nhé ! 

Sau đó các bạn tạo folder avts cùng cấp với file create_avt.php để chứa file ảnh. Giờ các bạn chạy thử xem nó lưu ảnh được chưa, nếu thành công thì sẽ có kết quả như thế này :

result create avt with name jpg

Thế là bạn đã làm xong chức năng này rồi đấy! Đây chỉ là chức năng đơn giản thôi nên không có CDSL hay session gì đâu, ngoài ra các bạn có thể sáng tạo thêm bằng cách chọn màu nền ngẫu nhiên để ảnh phong phú hơn.

3. Lời kết

Hi vọng qua bài này các bạn đã có thể nắm được cách tạo một ảnh bằng canvas và PHP, đồng thời biết và làm được chức năng tạo ảnh đại diện theo tên để có thể áp dụng vào các dự án của bạn. Chúc các bạn thành công! 

Cùng chuyên mục:

Cách gộp hai object javascript lại với nhau

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng innerHTML trong Javascript

Cách dùng insertBefore trong javascript

Cách dùng insertBefore trong javascript

Cách dùng insertAfter trong Javascript

Cách dùng insertAfter trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentElement trong Javascript

Cách dùng parentElement trong Javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng hai số bằng Javascript (cộng hai số)

Tính tổng hai số bằng Javascript (cộng hai số)

Cách gán giá trị cho thẻ input trong javascript

Cách gán giá trị cho thẻ input trong javascript

Để gán giá trị cho thẻ input thì ta có hai cách, thứ nhất là…

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên dương trong javascript

Cách kiểm tra số nguyên dương trong javascript

Hàm closure trong javascript

Hàm closure trong javascript

Closure là một khái niệm không phải ai cũng ..

Biểu thức chính quy RegEx trong Javascript

Biểu thức chính quy RegEx trong Javascript

Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức…

Cách dùng Import / Export Module trong javascript

Cách dùng Import / Export Module trong javascript

Khi bạn xây dựng một ứng dụng nhỏ thì việc đặt

Cơ chế hoạt động của hoisting trong Javascript

Cơ chế hoạt động của hoisting trong Javascript

Hoisting là vấn đề liên quan đến cách khai báo biến trong Javascript. Nó liên…

Cấp độ private / protected của class trong Javascript

Cấp độ private / protected của class trong Javascript

Top