PHP & JQuery Photo Upload and Crop

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é…

Đượ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

[code] <form action="upload.php" enctype="multipart/form-data" method="post">
Photo
<input name="image" size="30" type="file">
<input name="upload" value="Upload" type="submit">
</form>
[/code]

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 :D

[code language=”php”] 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();
}
}
[/code]

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:

[code] <script type="text/javascript" src="js/jquery-pack.js"></script>
<script type="text/javascript" src="js/jquery.imgareaselect.min.js"></script>
<script type="text/javascript">
function preview(img, selection) {
var scaleX = 100 / selection.width;
var scaleY = 100 / selection.height;

$(‘#thumbnail + div > img’).css({
width: Math.round(scaleX * 500) + ‘px’,
height: Math.round(scaleY * 500) + ‘px’,
marginLeft: ‘-‘ + Math.round(scaleX * selection.x1) + ‘px’,
marginTop: ‘-‘ + Math.round(scaleY * selection.y1) + ‘px’
});
$(‘#x1’).val(selection.x1);
$(‘#y1’).val(selection.y1);
$(‘#x2’).val(selection.x2);
$(‘#y2’).val(selection.y2);
$(‘#w’).val(selection.width);
$(‘#h’).val(selection.height);
}

$(document).ready(function () {
$(‘#save_thumb’).click(function() {
var x1 = $(‘#x1’).val();
var y1 = $(‘#y1’).val();
var x2 = $(‘#x2’).val();
var y2 = $(‘#y2’).val();
var w = $(‘#w’).val();
var h = $(‘#h’).val();
if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
alert("You must make a selection first");
return false;
}else{
return true;
}
});
});

$(window).load(function () {
$(‘#thumbnail’).imgAreaSelect({ aspectRatio: ‘1:1’, onSelectChange: preview });
});
</script>
[/code]

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

[code] <h2>Create Thumbnail</h2>
<div align="center">

<div style="border:1px #e5e5e5 solid; float:left; position:relative; overflow:hidden; width:100px; height:100px;">

</div>
<br style="clear:both;"/>
<form name="thumbnail" action="" method="post">
<input type="hidden" name="x1" value="" id="x1" />
<input type="hidden" name="y1" value="" id="y1" />
<input type="hidden" name="x2" value="" id="x2" />
<input type="hidden" name="y2" value="" id="y2" />
<input type="hidden" name="w" value="" id="w" />
<input type="hidden" name="h" value="" id="h" />
<input type="submit" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb" />
</form>
</div>
[/code]

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

[php] 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);
[/php]

Ả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ỗ đó :D

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.