PHP & JQuery Photo Upload and Crop

Tác giả: Nguyễn Duy Nhân    4 Comments

Chiêu thức này khá hay nhưng hiện nay chưa phổ biến (mình thấy ít website có tính năng này, phần lớn là các site mạng xã hội cho phép upload và chỉnh sửa avatar mà thôi). Nói nôm na nó là thế này: upload ảnh lên và cắt ảnh theo yêu cầu của mình. Chấm hết !!!!

Nói thế thôi, nhưng nếu website chúng ta có tính năng này thì nhìn sẽ hết sức pro ah nha. Đầu tiên, chúng ta hãy xem một ví dụ này: PHP & JQuery Photo Upload and Crop demo. Do hosting của mình không đảm bảo được việc để các bạn upload hình ảnh thoải mái nên tạm thời mình khóa tính năng upload và chỉ giữ lại tính năng crop ảnh để mọi người xem. Phần upload chắc không phải là vấn đề gì khó khăn đối với anh em lập trình web. .

Mình sẽ giành ít phút để anh em xem ví dụ đã….. mình sẽ đợi, cứ test thoải mái nhé…

PHP & JQuery Photo Upload and Crop

Được rồi !

Sau khi mọi người xem xong ví dụ, câu hỏi đặt ra sẽ là chúng ta sẽ làm nó như thế nào đây !!!!

Chúng ta cần những gì.

• Jquery – dĩ nhiên rồi
• imgAreaSelect – đây là một plugin của Jquery
• Một tí PHP để nấu lẩu thập cẩm

OK ! Chúng ta chỉ cần có thế thôi. Giờ là công đoạn bắt tay thực hiện tut này:

PHP & JQuery Photo Upload and Crop

1. Trước tiên,chúng ta cần tạo một form PHP cho phép bạn upload hình ảnh lên

Photo

2. Bước tiếp theo bạn cần là một đoạn code PHP cho phép bạn upload hình ảnh lên và resize lại nó. Đoạn code này mỗi người mỗi kiểu nên mình không mô tả rõ nữa nha. Làm thế nào tùy bạn

if (isset($_POST["upload"])) {
	//Get the file information
	$userfile_name = $_FILES["image"]["name"];
	$userfile_tmp = $_FILES["image"]["tmp_name"];
	$userfile_size = $_FILES["image"]["size"];
	$filename = basename($_FILES["image"]["name"]);
	$file_ext = substr($filename, strrpos($filename, ".") + 1);

	//Only process if the file is a JPG and below the allowed limit
	if((!empty($_FILES["image"])) && ($_FILES["image"]["error"] == 0)) {
		if (($file_ext!="jpg") && ($userfile_size > $max_file)) {
			$error= "ONLY jpeg images under 1MB are accepted for upload";
		}
	}else{
		$error= "Select a jpeg image for upload";
	}
	//Everything is ok, so we can upload the image.
	if (strlen($error)==0){

		if (isset($_FILES["image"]["name"])){

			move_uploaded_file($userfile_tmp, $large_image_location);
			chmod ($large_image_location, 0777);

			$width = getWidth($large_image_location);
			$height = getHeight($large_image_location);
			//Scale the image if it is greater than the width set above
			if ($width > $max_width){
				$scale = $max_width/$width;
				$uploaded = resizeImage($large_image_location,$width,$height,$scale);
			}else{
				$scale = 1;
				$uploaded = resizeImage($large_image_location,$width,$height,$scale);
			}
			//Delete the thumbnail file so the user can create a new one
			if (file_exists($thumb_image_location)) {
				unlink($thumb_image_location);
			}
		}
		//Refresh the page to show the new uploaded image
		header("location:".$_SERVER["PHP_SELF"]);
		exit();
	}
}

Trong đoạn code trên có 1 số điểm đáng chú ý như sau:

• Hàm getWidth(), getHeight() cho phép mình lấy chiều rộng và chiều cao của hình ảnh hiện tại sau khi upload
• $scale cho mình biết tỉ lệ thu nhỏ thích hợp nếu hình khi upload vượt quá tiêu chuẩn hình ảnh do mình đề ra. Việc này giúp hạn chế tình trạng người khác up hình ảnh quá lớn lên website (hình quá lớn thì nó sẽ resize lại).

3. Sau khi hình ảnh được upload lên website, chúng ta tiến hành bước tiếp theo đó là crop hình ảnh. Chúng ta sử dụng plugin imgAreaSelect để chọn không gian ảnh cần thiết cho việc crop hình.

Việc đầu tiên là đưa register plugin này cho hình ảnh:

Form cho phép lựa chọn khu vực crop:

Create Thumbnail

			

				
			

			









			

Lấy giá trị trả về server và tiến hành crop ảnh theo yêu cầu:

if (isset($_POST["upload_thumbnail"]) && strlen($large_photo_exists)>0) {
	//Get the new coordinates to crop the image.
	$x1 = $_POST["x1"];
	$y1 = $_POST["y1"];
	$x2 = $_POST["x2"];
	$y2 = $_POST["y2"];
	$w = $_POST["w"];
	$h = $_POST["h"];
	//Scale the image to the thumb_width set above
	$scale = $thumb_width/$w;
	$cropped = resizeThumbnailImage($thumb_image_location, $large_image_location,$w,$h,$x1,$y1,$scale);

Ảnh hiện lên trên demo là do mình sử dụng một plugin khác để hiển thị lên thôi, không quan trọng chỗ đó

Giờ là code full để các bạn test.

Download Source Code: PHP & JQuery Photo Upload and Crop

Bạn click vào liên kết bên dưới để tải:

Download Source Code: PHP & JQuery Photo Upload and Crop

Chúc mọi người vui vẻ và thành công.

Bạn nên đọc

• Hướng dẫn đăng ký tài khoản Paypal tại VN
• Mời hợp tác kiếm tiền (designer và coder)
• Tạo con dấu đỏ bằng photoshop
• Audio các bài thuyết pháp của Thượng Tọa Thích Chân Quang
• RobotVN 1.2.0 open beta…
• Framework Wordpress nào SEO tốt ?
• Sử dụng Gravatar để tạo Avatar tại mọi mặt trận Wordpress
• Liên hệ
• Tổng kết NhanWeb tháng 04/2011
• CSS PopUp – Hiện POPUP đẹp hơn, dễ dàng hơn…