Php 裁剪图像时出错，请保存图像
请检查下面的代码，我正在使用jquery和PHP代码。我没有那么多关于PHP的知识，所以请带我离开这里。我需要PHP页面和html页面分开。 这是我的popup.html。如果我做了错误的代码，请告诉我Php 裁剪图像时出错，请保存图像,php,javascript,jquery,imageareaselect,Php,Javascript,Jquery,Imageareaselect,请检查下面的代码，我正在使用jquery和PHP代码。我没有那么多关于PHP的知识，所以请带我离开这里。我需要PHP页面和html页面分开。 这是我的popup.html。如果我做了错误的代码，请告诉我 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Popup</title> <link rel="styleshe
<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>
弹出窗口
"
创建uploads文件夹时出错。如果您希望通过在必要时保持纵横比和croping图像，以指定的维度生成新图像，则此代码适用于您：）
函数调整图像大小\u裁剪（$image、$width、$height）
{
$w=@imagesx（$image）；//当前宽度
$h=@imagesy（$image）；//当前高度
如果（（！$w）|（！$h））{$GLOBALS['errors'][='无法调整图像大小，因为它不是有效的图像。'；返回false；}
if（（$w==$width）&（$h==$height））{return$image；}//无需调整大小
$ratio=$width/$w；//首先尝试最大宽度。。。
$new_w=$width；
$new_h=$h*$比率；
如果（$new_h<$height）{//如果这样创建的图像比我们想要的要小，请尝试另一种方法
$ratio=$height/$h；
$new_h=$height；
$new_w=$w*$比率；
}
$image2=imagecreatetruecolor（$new\u w，$new\u h）；
imagecopyresampled（$image2，$Image0，0，0，0，$new\u w，$new\u h，$w，$h）；
如果（$new_h！=$height）| |（$new_w！=$width））{//检查是否需要进行裁剪
$image3=imageCreateTureColor（$width，$height）；
如果（$new_h>$height）{//垂直裁剪
$extra=$new_h-$height；
$x=0；//源x
$y=四舍五入（$extra/2）；//源y
imagecopyresampled（$image3、$image2、0、0、$x、$y、$width、$height、$width、$height）；
}否则{
$extra=$new_w-$width；
$x=四舍五入（$extra/2）；//源x
$y=0；//源y
imagecopyresampled（$image3、$image2、0、0、$x、$y、$width、$height、$width、$height）；
}
图像销毁（$图像2）；
返回$image3；
}否则{
返回$image2；
}
}
PHP已经加入
我不知道你是否需要创建一个js函数来裁剪图像。有很多函数可以用来处理图像。所以不需要做额外的工作
您也可以在此处查看该链接
检查它们的功能。你可以在图像处理类的帮助下轻松完成你的工作。这个类的示例使用
$myImage = new ImageManipulator($_FILES['form_field_name']['tmp_name']);
然后，您可以通过这一行代码调整图像大小
$myImage->resample(480, 320); // resize to 480x320
同样，您可以裁剪它，放大它..用于裁剪…（为变量设置值）
用于保存在目标中
$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最好在该标记中完成
谢谢。urm，你的问题到底是什么！嘿，你给出的html代码不合适而且充满错误，请给出问题的编辑版本。正如harsha所说，你的问题在哪里？@A.F.M.Nazmusakib我已经编辑了我的代码，请检查。我想将剪切的图像保存到上传中folder@A.F.M.NazmusSakib它无法得到p即使我提到了完整/正确的路径，上传文件夹的路径。此功能是否可用于在屏幕上编辑图像？
$myImage->save('/path/to/uploadfolder/image.jpg', IMAGETYPE_JPEG);
<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>