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!

test php

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

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

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

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.

Bài viết này được đăng tại [free tuts .net]

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!

Danh sách file tải về

Tên file tải về	Pass giải nén
Chức năng tạo ảnh đại diện theo tên như Google với Javascript và PHP	freetuts.net hoặc gameportable.net

Bài trước Bài tiếp

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

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

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

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

Viết HTML

Viết CSS

Viết Javascript

Viết PHP

3. Lời kết

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

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

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 insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

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

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

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

Viết HTML

Viết CSS

Viết Javascript

Viết PHP

3. Lời kết

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

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

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 insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Giới thiệu

Thủ thuật

Link hay

Liên kết

Phân biệt prototype và proto trong JavaScript