Crop billede med jQuery, PHP og html
Hej eksperter!Jeg har i forvejen et oprettet spørgsmål (på udvikleren.dk) omkring en crop funktion af et billede. Det her er bare en ny udgave, og virker næsten. Problemet er bare at den ikke sender thumb billedet op til databasen, kun det originale. Og thumb billedet gemmer ikke de rigtig koordinationer. Den gemmer et billede af det originale billede, bare med koordinationer der passer til øverst til venstre, og 100 pixel i højde og bredde. Den skal gemme billedet som man har markeret det.
PHP kode
<?php
session_start();
ob_start();
include('includes/db_connect.php');
$projectID = $_POST["projectID"];
$path = "../images/portfolie/";
$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<(1280*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 projects SET imgsrc='$actual_image_name' WHERE projectID='$projectID' ");
$image="<h1>Please drag on the image</h1><img src='../images/portfolie/".$actual_image_name."' id=\"photo\" height=\"300\" width=\"300\" ";
}
else
echo "failed";
}
else
echo "Invalid file formats..!";
}
else
echo "Please select image..!";
}
?>
JScript kode
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='../images/portfolie/"+rsponse+"' />");
}
});
}
}
else
alert("Please select portion..!");
}
$(document).ready(function ()
{
$('img#photo').imgAreaSelect({
aspectRatio: '1:1',
onSelectEnd: getSizes
});
});
HTML kode
<?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)?>" /><br /><br />
<select name="projectID">
<?php
$GetProjects = mysql_query("SELECT * FROM projects ORDER BY id DESC");
while($GetProjectsRow = mysql_fetch_assoc($GetProjects)) {
?>
<option value="<?php echo $GetProjectsRow["projectID"]; ?>"><?php echo $GetProjectsRow["title"]; ?></option>
<?php } ?>
</select>
<input type="submit" name="submit" value="Submit" />
</form>
ajax-image.php
PHP kode
<?php
include('includes/db_connect.php');
session_start();
$projectID = $_POST["projectID"];
$t_width = 100; // Maximum thumbnail width
$t_height = 100; // Maximum thumbnail height
$new_name = "small".time().".jpg"; // Thumbnail image name
$path = "../images/portfolie/";
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 projects SET thumb_imgsrc='$new_name' WHERE projectID='$projectID' ");
echo $new_name."?".time();
exit;
}
?>
Jeg håber at nogen kan hjælpe mig :)
