请检查下面的代码，我正在使用jquery和PHP代码。我没有太多关于PHP的知识，所以请让我离开这里。我需要PHP页面和html页面分开。 这是我的popup.html。我做错了代码的地方，请告诉我
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Popup</title>
<link rel="stylesheet" href="css/imgareaselect-animated.css" type="text/css" />
<link rel="stylesheet" href="css/imgareaselect-default.css" type="text/css" />
<link rel="stylesheet" href="css/imgareaselect-deprecated.css" type="text/css" />
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.imgareaselect.pack.js"></script>
<script src="jquery.imgareaselect.min.js"></script>
<script src="jquery.imgareaselect.js"></script>
</head>
<body>
<form id="cropimage" method="post" enctype="multipart/form-data">
<input type="file" value="" size="" class="Textbox FieldRequired" name="ProductFields[3]" id="files">
<input type="submit" value="upload" class="uploadphoto"/>
<div id="popup_box">
<!-- OUR PopupBox DIV-->
<a id="popupBoxClose">close</a>
<div id="popup_box1" style="margin:0 auto; width:600px">
<div id="thumbs" style="padding:5px; width:600px"></div>
<div style="width:600px">
<input type="hidden" name="image_name" id="image_name" value="" />
<input type="submit" name="submit" value="Submit" />
</form>
</div>
</div>
</div>
<div id="container"> <!-- Main Page -->
</div>
<script type="text/javascript">
$(document).ready( function() {
$(".uploadphoto").click(function() {
if(document.getElementById('files').files.length == 0){
alert('Select an Image first');
return false;}
// }else {
// When upload button is pressed, load the Popupbox First
loadPopupBox();
// }
$('#popupBoxClose').click( function() {
unloadPopupBox();
$('.imgareaselect-outer').css('display','none');
$('.imgareaselect-selection').css('display','none');
$('.imgareaselect-border1,.imgareaselect-border2,.imgareaselect-border3,.imgareaselect-border4,.imgareaselect-handle').css('display','none');
document.getElementById('files').value="";
});
$('#container').click( function() {
unloadPopupBox();
});
function unloadPopupBox() { // TO Unload the Popupbox
$('#popup_box').fadeOut("slow");
$("#container").css({ // this is just for style
"opacity": "1"
});
}
function loadPopupBox() { // To Load the Popupbox
$('#popup_box').fadeIn("slow");
$("#container").css({ // this is just for style
"opacity": "1.5"
});
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
//$('.FieldRequired').attr('id','files');
// set up variables
var reader = new FileReader(),
i=0,
numFiles = 0,
imageFiles;
// use the FileReader to read image i
function readFile() {
reader.readAsDataURL(imageFiles[i])
}
// define function to be run when the File
// reader has finished reading the file
reader.onloadend = function(e) {
// make an image and append it to the div
var image = $('<img>').attr('src', e.target.result);
var imgdiv = $('#popup_box');
$(imgdiv).append(image);
$('#popup_box img').attr('id','img1');
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#img1').imgAreaSelect({
aspectRatio: '1:1',
onSelectEnd: getSizes
});
});
// if there are more files run the file reader again
if (i < numFiles) {
i++;
readFile();
}
};
$(".uploadphoto").click(function() {
imageFiles = document.getElementById('files').files
// get the number of files
numFiles = imageFiles.length;
readFile();
});
});
$('#popup_box1').load('save_image.php');
</script>
<style type="text/css">
/* popup_box DIV-Styles*/
#popup_box {
display:none; /* Hide the DIV */
position:fixed;
_position:absolute; /* hack for internet explorer 6 */
height:500px;
width:500px;
background:#FFFFFF;
left: 30%;
top: 20%;
z-index:100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
margin-left: 15px;
/* additional features, can be omitted */
border:2px solid #ff0000;
padding:15px;
font-size:15px;
-moz-box-shadow: 0 0 5px #ff0000;
-webkit-box-shadow: 0 0 5px #ff0000;
box-shadow: 0 0 5px #ff0000;
}
#popup_box img {
height: 476px;
margin: 3px;
width: 494px;
}
#container {
background: #d2d2d2; /*Sample*/
width:100%;
height:100%;
}
a {
cursor: pointer;
text-decoration:none;
}
/* This is for the positioning of the Close Link */
#popupBoxClose {
background: url("close.png") no-repeat scroll 0 0 transparent;
color: transparent;
font-size: 20px;
line-height: 26px;
position: absolute;
right: -28px;
top: -14px;
}
</style>
</body>
这是我的Save Image.php
<?php
//include('db.php');
session_start();
$session_id='1'; //$session id
$path = "uploads/";
?>
<?php
$valid_formats = array("jpg", "png", "gif", "bmp");
if(isset($_REQUEST['submit']))
{
$name = $_FILES['files']['name'];
$size = $_FILES['files']['size'];
if(strlen($name))
{
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats) && $size<(1024*1024))
{
$actual_image_name = time().substr($txt, 5).".".$ext;
$tmp = $_FILES['files']['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\" style='max-width:500px' >";
}
else
echo "failed";
}
else
echo "Invalid file formats..!";
}
else
echo "Please select image..!";
}
?>
<div style="margin:0 auto; width:600px">
<?php if(isset($image))echo $image; ?>
<div id="thumbs" style="padding:5px; width:600px"></div>
<div style="width:600px">
获取错误 “NetworkError：404 Not Found - http://abc.com/CropImage-PHP/uploads/%3Cbr%20/%3E%3Cb%3EWarning%3C/b%3E:%20%20imagecreatefromjpeg(uploads/undefined)%20%5B%3Ca%20href=”
创建上传文件夹时出错。
答案 0 :(得分：2)
如果您希望通过保持纵横比并在必要时裁剪图像来生成指定尺寸的新图像。那么这段代码适合你：）
function resize_image_crop($image, $width, $height)
{
$w = @imagesx($image); //current width
$h = @imagesy($image); //current height
if ((!$w) || (!$h)) { $GLOBALS['errors'][] = 'Image couldn\'t be resized because it wasn\'t a valid image.'; return false; }
if (($w == $width) && ($h == $height)) { return $image; } //no resizing needed
$ratio = $width / $w; //try max width first...
$new_w = $width;
$new_h = $h * $ratio;
if ($new_h < $height) { //if that created an image smaller than what we wanted, try the other way
$ratio = $height / $h;
$new_h = $height;
$new_w = $w * $ratio;
}
$image2 = imagecreatetruecolor ($new_w, $new_h);
imagecopyresampled($image2,$image, 0, 0, 0, 0, $new_w, $new_h, $w, $h);
if (($new_h != $height) || ($new_w != $width)) { //check to see if cropping needs to happen
$image3 = imagecreatetruecolor ($width, $height);
if ($new_h > $height) { //crop vertically
$extra = $new_h - $height;
$x = 0; //source x
$y = round($extra / 2); //source y
imagecopyresampled($image3,$image2, 0, 0, $x, $y, $width, $height, $width, $height);
} else {
$extra = $new_w - $width;
$x = round($extra / 2); //source x
$y = 0; //source y
imagecopyresampled($image3,$image2, 0, 0, $x, $y, $width, $height, $width, $height);
}
imagedestroy($image2);
return $image3;
} else {
return $image2;
}
}
答案 1 :(得分：2)
PHP有bult-in GD Librery
我不知道你是否有必要创建一个js函数来裁剪图像。有许多功能可用于操作图像。所以不需要做额外的工作。
您还可以在此处https://gist.github.com/philBrown/880506
查看该链接检查他们的功能。您可以在图像处理类的帮助下轻松完成工作。使用此类的示例......
$myImage = new ImageManipulator($_FILES['form_field_name']['tmp_name']);
然后你可以通过这一行代码调整图像大小......
$myImage->resample(480, 320); // resize to 480x320
类似地你可以裁剪它，放大它...用于裁剪...（变量的设定值）
$myImage->crop($x1_axis, $y1_axis, $x2_axis, $y2_axis);
用于保存在目的地....
$myImage->save('/path/to/uploadfolder/image.jpg', IMAGETYPE_JPEG);
我认为你可以很容易地处理这个类的图像处理。我不知道它对你有多大用处，但对于图像处理来说这是一个很好的类。
你的Html仍有不合适的标签结尾。
它应该是......
<form id="cropimage" method="post" enctype="multipart/form-data">
<input type="file" value="" size="" class="Textbox FieldRequired" name="ProductFields[3]" id="files">
<input type="submit" value="upload" class="uploadphoto"/>
<div id="popup_box">
<!-- OUR PopupBox DIV-->
<a id="popupBoxClose">close</a>
<div id="popup_box1" style="margin:0 auto; width:600px">
<div id="thumbs" style="padding:5px; width:600px"></div>
<div style="width:600px">
<input type="hidden" name="image_name" id="image_name" value="" />
<input type="submit" name="submit" value="Submit" />
</div>
</div>
</div>
</form>
代替当前代码...
<form id="cropimage" method="post" enctype="multipart/form-data">
<input type="file" value="" size="" class="Textbox FieldRequired" name="ProductFields[3]" id="files">
<input type="submit" value="upload" class="uploadphoto"/>
<div id="popup_box">
<!-- OUR PopupBox DIV-->
<a id="popupBoxClose">close</a>
<div id="popup_box1" style="margin:0 auto; width:600px">
<div id="thumbs" style="padding:5px; width:600px"></div>
<div style="width:600px">
<input type="hidden" name="image_name" id="image_name" value="" />
<input type="submit" name="submit" value="Submit" />
</form>
</div>
</div>
</div>
你在标签中开始的div更好地在标签中完成。
感谢。