Upload và Crop ảnh với PHP và Jquery

Hi! Xin chào các bạn, đã lâu rồi mình mới lại quay trở lại để chăm sóc cho blog của mình, và bài viết này mình sẽ hướng dẫn các bạn thực hiện upload ảnh, sau đó cắt ảnh mà không load trang chỉ sử dụng Jquery và PHP

Ở bài viết trước, tôi đã hướng dẫn các bạn thủ thuật upload ảnh mà không load lại trang sử dụng jquery ở bài trước, và bài này sẽ lấy ý tưởng từ bài đó.
I.Database
OK!Vẫn là db của bài trước thôi. Tôi post lại đây tiện cho các bạn tham khảo

CREATE TABLE `users` (
`uid` int(11) AUTO_INCREMENT PRIMARY KEY,
`username` varchar(255) UNIQUE KEY,
`password` varchar(100),
`email` varchar(255) UNIQUE KEY,
`profile_image` varchar(200),
`profile_image_small` varchar(200),
)

CREATE TABLE `users` (

`uid` int(11) AUTO_INCREMENT PRIMARY KEY,

`username` varchar(255) UNIQUE KEY,

`password` varchar(100),

`email` varchar(255) UNIQUE KEY,

`profile_image` varchar(200),

`profile_image_small` varchar(200),

)

II.PHP
Còn đoạn mã PHP dưới đây sẽ làm nhiệm vụ sử lý file upload, thực hiện upload ảnh lên server và chèn vào db

<?php
include('db.php');
session_start();
$session_id=$_SESSION['user'];//  Session ID
$path = "uploads/";
$valid_formats = array("jpg", "png", "gif", "bmp");
if(isset($_POST['submit']))
{
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(strlen($name))
{
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats) && $size<(250*1024))
{
$actual_image_name = time().substr($txt, 5).".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$actual_image_name))
{
mysql_query("UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");
$image="<h1>Please drag on the image</h1><img src='uploads/".$actual_image_name."' id=\"photo\" ";
}
else
echo "failed";
}
else
echo "Invalid file formats..!"; 
}
else
echo "Please select image..!";
}
?>
//HTML Body
<?php echo $image; ?>
<div id="thumbs" ></div>
<div >
<form id="cropimage" method="post" enctype="multipart/form-data">
Upload your image <input type="file" name="photoimg" id="photoimg" />
<input type="hidden" name="image_name" id="image_name" value="<?php echo($actual_image_name)?>" />
<input type="submit" name="submit" value="Submit" /> 
</form>

<?php

include('db.php');

session_start();

$session_id=$_SESSION['user'];// Session ID

$path = "uploads/";

$valid_formats = array("jpg", "png", "gif", "bmp");

if(isset($_POST['submit']))

{

$name = $_FILES['photoimg']['name'];

$size = $_FILES['photoimg']['size'];

if(strlen($name))

{

list($txt, $ext) = explode(".", $name);

if(in_array($ext,$valid_formats) && $size<(250*1024))

{

$actual_image_name = time().substr($txt, 5).".".$ext;

$tmp = $_FILES['photoimg']['tmp_name'];

if(move_uploaded_file($tmp, $path.$actual_image_name))

{

mysql_query("UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");

$image="<h1>Please drag on the image</h1><img src='uploads/".$actual_image_name."' id=\"photo\" ";

}

else

echo "failed";

}

else

echo "Invalid file formats..!";

}

else

echo "Please select image..!";

}

//HTML Body

<?php echo $image; ?>

<div >

Upload your image <input type="file" name="photoimg" id="photoimg" />

</form>

III.Jquery
Dưới đây là đoạn jquery sử lý việc upload ảnh, sau đó lấy tọa độ của vùng cần cắt để thực hiện việc cắt ảnh

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/
1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
function getSizes(im,obj)
{
var x_axis = obj.x1;
var x2_axis = obj.x2;
var y_axis = obj.y1;
var y2_axis = obj.y2;
var thumb_width = obj.width;
var thumb_height = obj.height;
if(thumb_width > 0)
{
if(confirm("Do you want to save image..!"))
{
$.ajax({
type:"GET",
url:"ajax_image.php?t=ajax&img="+$("#image_name").val()+"&w="+
thumb_width+"&h="+thumb_height+"&x1="+x_axis+"&y1="+y_axis,
cache:false,
success:function(rsponse)
{
$("#cropimage").hide();
$("#thumbs").html("");
$("#thumbs").html("<img src='uploads/"+rsponse+"' />");
}
});
}
}
else
alert("Please select portion..!");
}
$(document).ready(function () 
{
$('img#photo').imgAreaSelect({
aspectRatio: '1:1',
onSelectEnd: getSizes
});
});
</script>

1.4.2/jquery.min.js"></script>

function getSizes(im,obj)

{

var x_axis = obj.x1;

var x2_axis = obj.x2;

var y_axis = obj.y1;

var y2_axis = obj.y2;

var thumb_width = obj.width;

var thumb_height = obj.height;

if(thumb_width > 0)

{

if(confirm("Do you want to save image..!"))

{

$.ajax({

type:"GET",

url:"ajax_image.php?t=ajax&img="+$("#image_name").val()+"&w="+

thumb_width+"&h="+thumb_height+"&x1="+x_axis+"&y1="+y_axis,

cache:false,

success:function(rsponse)

{

$("#cropimage").hide();

$("#thumbs").html("");

$("#thumbs").html("<img src='uploads/"+rsponse+"' />");

}

});

}

else

alert("Please select portion..!");

}

$(document).ready(function ()

{

$('img#photo').imgAreaSelect({

aspectRatio: '1:1',

onSelectEnd: getSizes

});

</script>

Ở đây chúng ta sử dụng một plugin đi kèm bên ngoài để thực hiện đó là Image Area Select
Với plugin trên, nó sẽ hỗ trợ chúng ta việc crop ảnh như ý muốn.
Các bạn chú ý đoạn ajax, url: là các đối số đầu vào cho file ajax_image.php mà chúng ta sẽ viết bên dưới.
Và cuối cùng là file sử lý việc crop, và lưu lại db

<?php
include('db.php');
session_start();
$session_id=$_SESSION['user']; // Or Session ID
$t_width = 100; // Maximum thumbnail width
$t_height = 100; // Maximum thumbnail height
$new_name = "small".$session_id.".jpg"; // Thumbnail image name
$path = "uploads/";
if(isset($_GET['t']) and $_GET['t'] == "ajax")
{
extract($_GET);
$ratio = ($t_width/$w); 
$nw = ceil($w * $ratio);
$nh = ceil($h * $ratio);
$nimg = imagecreatetruecolor($nw,$nh);
$im_src = imagecreatefromjpeg($path.$img);
imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$w,$h);
imagejpeg($nimg,$path.$new_name,90);
mysql_query("UPDATE users SET profile_image_small='$new_name' WHERE uid='$session_id'");
echo $new_name."?".time();
exit;
}
?>

<?php

include('db.php');

session_start();

$session_id=$_SESSION['user']; // Or Session ID

$t_width = 100; // Maximum thumbnail width

$t_height = 100; // Maximum thumbnail height

$new_name = "small".$session_id.".jpg"; // Thumbnail image name

$path = "uploads/";

if(isset($_GET['t']) and $_GET['t'] == "ajax")

{

extract($_GET);

$ratio = ($t_width/$w);

$nw = ceil($w * $ratio);

$nh = ceil($h * $ratio);

$nimg = imagecreatetruecolor($nw,$nh);

$im_src = imagecreatefromjpeg($path.$img);

imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$w,$h);

imagejpeg($nimg,$path.$new_name,90);

mysql_query("UPDATE users SET profile_image_small='$new_name' WHERE uid='$session_id'");

echo $new_name."?".time();

exit;

}

Ngoài ra còn file kết nối tới db, các bạn tự viết cho phù hợp nhé.

(9 lessions)

Upload và Crop ảnh với PHP và Jquery

Like this:

Có liên quan

Nguyễn Trung Hiếu

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu