现在要做一个网站，上传图片，然后截取一部分作为头像。但是现在遇到两个问题，求告手帮忙看看哪个地方出问题了。。怎么修改。。
问题一：就是上传图片完毕之后，不移动或者是不修改切图位置，直接剪裁，得出来的截图是黑色的。（即上传完毕，直接点击剪裁，等到黑色的截图。）
问题二：如果上传比较大的 图片，想规定固定的宽度，长度如何做到等比例收缩。（即，如果原图是1024*841，我想规定上传之后供剪裁的图片的宽度为700，如何做到等比例缩小高度。）
因为是新手，问题问的不专业，望各位不要见笑，往大侠帮忙解决一下。再次感激不尽。
以下是代码：upload1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="Author" content="SeekEver">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<script src="./js/jquery-1.6.2.js" type="text/javascript"></script>
<script src="./js/jquery.Jcrop.js" type="text/javascript"></script>
<script src="./js/jquery.form.js" type="text/javascript"></script>
<link rel="stylesheet" href="./css/jquery.Jcrop.css" type="text/css" />
<script type="text/javascript">
function onloadFunction (flag) {
jQuery(function($){
var jcrop_api, boundx, boundy;
if (flag && flag == 2) {
$(".jcrop-holder").find("img").each(function (){
$(this).attr("src", $('#target').attr("src"));
})
$("#preview").attr("src", $('#target').attr("src"));
$("#preview2").attr("src", $('#target').attr("src"));
}
$('#target').Jcrop({
minSize: [48,48],
setSelect: [0,0,190,190],
onChange: updatePreview,
onSelect: updatePreview,
onSelect: updateCoords,
aspectRatio: 1
},
function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
});
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};
function updatePreview(c){
if (parseInt(c.w) > 0)
{
var rx = 48 / c.w; //小头像预览Div的大小
var ry = 48 / c.h; $('#preview').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
{
var rx = 199 / c.w; //大头像预览Div的大小
var ry = 199 / c.h;
$('#preview2').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
};
});
} $(document).ready(function (){
onloadFunction();
}) function subCatForm() {
$("#bigImgUpload").val($("#target").attr("src"));
document.catFrom.submit();
}
function ajaxSub() {
$("#subForm").ajaxSubmit({
url:"upload1.php",
dataType:'html',
success:function(msg){
var status = msg.split("|");
if (status[0] == 'ok') {
$("#target").attr("src", status[1]);
onloadFunction(2);
} else {
alert(msg);
}
}
});
}
</script>
</head>
<body>
<form method="post" id="subForm" enctype="multipart/form-data">
<input type="hidden" name="flag" value="1" />
<input type="file" name="userfile">
<input type="button" value="上传" onclick="ajaxSub();">
</form>
<form action="upload1.php" name="catFrom" method="post" onsubmit="return checkCoords();">
<input type="hidden" name="flag" value="2" />
<input type="hidden" name="bigImgUpload" id="bigImgUpload" value="2" /><div style="float:left;"><img id="target" name="target" src="0000.jpg" /></div>
<div style="width:70px;height:70px;margin:10px;overflow:hidden; float:left;"><img style="float:left;" id="preview" src="0000.jpg" ></div>
<div style="width:190px;height:195px;margin:10px;overflow:hidden; float:left;"><img style="float:left;" id="preview2" src="0000.jpg" ></div>
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="button" onclick="subCatForm();" value="裁剪" />
</form>
</body>
</html>upload1.php
<?php
header("Content-type:text/html; Charset=utf-8");
$flag = $_POST['flag'];
if ($flag == 2) {
require_once("./image.class.php");
$images = new Images("file");
$image = $_POST['bigImgUpload'];
$res = $images->thumb($image,false,1); if($res == false){
echo "裁剪失败";
}elseif(is_array($res)){
echo $res['big']." ";
echo $res['small'];
echo '<img src="'.$res['big'].'" style="margin:10px;">';
echo '<img src="'.$res['small'].'" style="margin:10px;">';
}elseif(is_string($res)){
echo '<img src="'.$res.'">';
}
}if ($flag == 1) {
$return_mess = "头像无法上传，请重试。";
if ($_FILES['userfile']['error'] > 0)
{
switch ($_FILES['userfile']['error'])
{
case 1: $return_mess = 'File exceeded upload_max_filesize';
break;
case 2: echo 'File exceeded max_file_size';
break;
case 3: $return_mess = 'File only partially uploaded';
break;
case 4: $return_mess = 'No file uploaded';
break;
case 6: $return_mess = 'Cannot upload file: No temp directory specified.';
break;
case 7: $return_mess = 'Upload failed: Cannot write to disk.';
break;
}
echo $return_mess;
exit;
} $upload_file_type = $_FILES['userfile']['type'];
$file_type_ary = array(
'image/jpg',
'image/jpeg',
'image/png',
'image/pjpeg',
'image/gif',
'image/bmp',
'image/x-png'
);
if (!in_array($upload_file_type, $file_type_ary)) {
$return_mess = ' 文件格式不对，请重新选择文件！ ';
echo $return_mess;
exit;
}
$file_path = 'uploads/'; # 为了避免并发 最好加上 user_id 即 $file_path = 'uploads/{{user_id}}';
$time = time();
// 重命名文件
$img_name = strrchr($_FILES['userfile']['name'], ".");
$up_file = $file_path . $time . $img_name;
// echo $up_file;
if (is_uploaded_file($_FILES['userfile']['tmp_name']))
{
if (!move_uploaded_file($_FILES['userfile']['tmp_name'], $up_file))
{
$return_mess = 'Problem: Could not move file to destination directory';
echo $return_mess;
exit;
}
else
{
include('db_conn.php');
// 将 up_file 存入数据库 $return_mess = "ok|".$up_file;
echo $return_mess;
/*
$sql = "insert into images_user set user_id = '1',images_url = '$up_file'";
$result = $db->query($sql);
if(!$result)
{
$return_mess = '头像无法上传，请重试。';
echo $return_mess;
exit;
} else {
$return_mess = "ok|".$up_file;
echo $return_mess;
exit;
}*/
}
}
else
{
$return_mess = 'Problem: Possible file upload attack. Filename: ';
echo $return_mess;
exit;
}
}图片切图 php HTML上传头像
问题一：就是上传图片完毕之后，不移动或者是不修改切图位置，直接剪裁，得出来的截图是黑色的。（即上传完毕，直接点击剪裁，等到黑色的截图。）
问题二：如果上传比较大的 图片，想规定固定的宽度，长度如何做到等比例收缩。（即，如果原图是1024*841，我想规定上传之后供剪裁的图片的宽度为700，如何做到等比例缩小高度。）
因为是新手，问题问的不专业，望各位不要见笑，往大侠帮忙解决一下。再次感激不尽。
以下是代码：upload1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="Author" content="SeekEver">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<script src="./js/jquery-1.6.2.js" type="text/javascript"></script>
<script src="./js/jquery.Jcrop.js" type="text/javascript"></script>
<script src="./js/jquery.form.js" type="text/javascript"></script>
<link rel="stylesheet" href="./css/jquery.Jcrop.css" type="text/css" />
<script type="text/javascript">
function onloadFunction (flag) {
jQuery(function($){
var jcrop_api, boundx, boundy;
if (flag && flag == 2) {
$(".jcrop-holder").find("img").each(function (){
$(this).attr("src", $('#target').attr("src"));
})
$("#preview").attr("src", $('#target').attr("src"));
$("#preview2").attr("src", $('#target').attr("src"));
}
$('#target').Jcrop({
minSize: [48,48],
setSelect: [0,0,190,190],
onChange: updatePreview,
onSelect: updatePreview,
onSelect: updateCoords,
aspectRatio: 1
},
function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
});
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};
function updatePreview(c){
if (parseInt(c.w) > 0)
{
var rx = 48 / c.w; //小头像预览Div的大小
var ry = 48 / c.h; $('#preview').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
{
var rx = 199 / c.w; //大头像预览Div的大小
var ry = 199 / c.h;
$('#preview2').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
};
});
} $(document).ready(function (){
onloadFunction();
}) function subCatForm() {
$("#bigImgUpload").val($("#target").attr("src"));
document.catFrom.submit();
}
function ajaxSub() {
$("#subForm").ajaxSubmit({
url:"upload1.php",
dataType:'html',
success:function(msg){
var status = msg.split("|");
if (status[0] == 'ok') {
$("#target").attr("src", status[1]);
onloadFunction(2);
} else {
alert(msg);
}
}
});
}
</script>
</head>
<body>
<form method="post" id="subForm" enctype="multipart/form-data">
<input type="hidden" name="flag" value="1" />
<input type="file" name="userfile">
<input type="button" value="上传" onclick="ajaxSub();">
</form>
<form action="upload1.php" name="catFrom" method="post" onsubmit="return checkCoords();">
<input type="hidden" name="flag" value="2" />
<input type="hidden" name="bigImgUpload" id="bigImgUpload" value="2" /><div style="float:left;"><img id="target" name="target" src="0000.jpg" /></div>
<div style="width:70px;height:70px;margin:10px;overflow:hidden; float:left;"><img style="float:left;" id="preview" src="0000.jpg" ></div>
<div style="width:190px;height:195px;margin:10px;overflow:hidden; float:left;"><img style="float:left;" id="preview2" src="0000.jpg" ></div>
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="button" onclick="subCatForm();" value="裁剪" />
</form>
</body>
</html>upload1.php
<?php
header("Content-type:text/html; Charset=utf-8");
$flag = $_POST['flag'];
if ($flag == 2) {
require_once("./image.class.php");
$images = new Images("file");
$image = $_POST['bigImgUpload'];
$res = $images->thumb($image,false,1); if($res == false){
echo "裁剪失败";
}elseif(is_array($res)){
echo $res['big']." ";
echo $res['small'];
echo '<img src="'.$res['big'].'" style="margin:10px;">';
echo '<img src="'.$res['small'].'" style="margin:10px;">';
}elseif(is_string($res)){
echo '<img src="'.$res.'">';
}
}if ($flag == 1) {
$return_mess = "头像无法上传，请重试。";
if ($_FILES['userfile']['error'] > 0)
{
switch ($_FILES['userfile']['error'])
{
case 1: $return_mess = 'File exceeded upload_max_filesize';
break;
case 2: echo 'File exceeded max_file_size';
break;
case 3: $return_mess = 'File only partially uploaded';
break;
case 4: $return_mess = 'No file uploaded';
break;
case 6: $return_mess = 'Cannot upload file: No temp directory specified.';
break;
case 7: $return_mess = 'Upload failed: Cannot write to disk.';
break;
}
echo $return_mess;
exit;
} $upload_file_type = $_FILES['userfile']['type'];
$file_type_ary = array(
'image/jpg',
'image/jpeg',
'image/png',
'image/pjpeg',
'image/gif',
'image/bmp',
'image/x-png'
);
if (!in_array($upload_file_type, $file_type_ary)) {
$return_mess = ' 文件格式不对，请重新选择文件！ ';
echo $return_mess;
exit;
}
$file_path = 'uploads/'; # 为了避免并发 最好加上 user_id 即 $file_path = 'uploads/{{user_id}}';
$time = time();
// 重命名文件
$img_name = strrchr($_FILES['userfile']['name'], ".");
$up_file = $file_path . $time . $img_name;
// echo $up_file;
if (is_uploaded_file($_FILES['userfile']['tmp_name']))
{
if (!move_uploaded_file($_FILES['userfile']['tmp_name'], $up_file))
{
$return_mess = 'Problem: Could not move file to destination directory';
echo $return_mess;
exit;
}
else
{
include('db_conn.php');
// 将 up_file 存入数据库 $return_mess = "ok|".$up_file;
echo $return_mess;
/*
$sql = "insert into images_user set user_id = '1',images_url = '$up_file'";
$result = $db->query($sql);
if(!$result)
{
$return_mess = '头像无法上传，请重试。';
echo $return_mess;
exit;
} else {
$return_mess = "ok|".$up_file;
echo $return_mess;
exit;
}*/
}
}
else
{
$return_mess = 'Problem: Possible file upload attack. Filename: ';
echo $return_mess;
exit;
}
}图片切图 php HTML上传头像
image.class.php
<?php
class Images{
var $inputName; //控件名
var $allowType = array(
'image/gif','image/jpg','image/jpeg','image/png','image/x-png','image/pjpeg'
); //上传类型
var $allowSize = 2097152; //限制大小
var $saveDir = "./uploads/"; //保存目录
var $isRename = true; //是否重命名，默认为true
var $errID = 0; //错误代码，默认为0
var $errMsg = ""; //错误信息
var $savePath = ""; //保存路径 function __construct($inputName,$allowType="",$allowSize="",$saveDir="",$isRename=true){
if(empty($inputName)){
$this->chk_err(-1); //无传入控件名
}else{
$this->inputName = $inputName;
} if(!empty($allowType)) $this->allowType = $allowType;
if(!empty($allowSize)) $this->allowSize = $allowSize;
if(!empty($saveDir)) $this->saveDir = $saveDir;
if(!empty($isRename)) $this->isRename = $isRename;
} function is_uploaded(){
if(empty($_FILES[$this->inputName]['name'])){
$this->chk_err(4); //没有文件被上传
}else{
if(is_uploaded_file($_FILES[$this->inputName]['tmp_name'])){
return true;
}else{
$this->chk_err(-2); //文件上传不合法
}
}
} function chk_type(){
if(!in_array($_FILES[$this->inputName]['type'],$this->allowType)){
$this->chk_err(-3); //上传的文件类型不被允许
}else{
return true;
}
} function chk_size(){
if($_FILES[$this->inputName]['size'] > $this->allowSize){
$this->chk_(-4); //上传的文件过大
}else{
return true;
}
} function move_uploaded(){ //移动上传文件
if(!$this->is_uploaded()){
return false;
} if(!$this->chk_size()){
return false;
} if(!$this->chk_type()){
return false;
} //重命名
if($this->isRename){
# $arrTmp = pathinfo($_FILES[$this->inputName]['name']);
# $extension = strtolower($arrTmp['extension']);
# $file_newname = date("YmdHis").rand(1000,9999)."00.".$extension; //重命名新文件， 00表示为上传的为原图
$time = time();
$img_name = strrchr($_FILES[$this->inputName]['name'], ".");
$file_newname = $this->saveDir . $time . $img_name;
}else{
$file_newname = $_FILES[$this->inputName]['name'];
}
if(!file_exists($this->saveDir)){ //判断保存目录是否存在
mkdir($this->saveDir,0777,true); //建立保存目录
}
//移动文件
$result = move_uploaded_file($_FILES[$this->inputName]['tmp_name'],$this->saveDir."/".$file_newname); if($result){
$path = $this->savePath = $this->saveDir."/".$file_newname; //文件的成功保存路径
return $path;
}else{
$this->chk_err($_FILES[$this->inputName]['error']);
}
} //判断出错信息
function chk_err($errID){
$this->errID = $errID;
switch($this->errID){
case -4:
$this->errMsg = "上传的文件过大";
break;
case -3:
$this->errMsg = "上传的文件类型不被允许";
break;
case -2:
$this->errMsg = "文件上传不合法";
break;
case -1:
$this->errMsg = "无控件名传入";
break;
case 1:
$this->errMsg = '上传的文件超出了php.ini中upload_max_filesize设定的最大值';
break;
case 2:
$this->errMsg = '上传文件的大小超过了HTML表单中MAX_FILE_SIZE选项指定的值';
break;
case 3:
$this->errMsg = '文件只有部分被上传';
break;
case 4:
$this->errMsg = '没有文件被上传';
break;
default:
break;
}
return false;
} function get_errMsg(){
echo $this->errMsg; //输出错误信息
} /**
+----------------------------------------------------------
* 取得图像信息
*
+----------------------------------------------------------
* @static
* @access public
+----------------------------------------------------------
* @param string $image 图像文件名
+----------------------------------------------------------
* @return mixed
+----------------------------------------------------------
*/
function getImageInfo($img) {
$imageInfo = getimagesize($img);
if( $imageInfo!== false) {
$imageType = strtolower(substr(image_type_to_extension($imageInfo[2]),1));
$imageSize = filesize($img);
$info = array(
"width" =>$imageInfo[0],
"height" =>$imageInfo[1],
"type" =>$imageType,
"size" =>$imageSize,
"mime" =>$imageInfo['mime'],
);
return $info;
}else {
return false;
}
} /**
+----------------------------------------------------------
* 生成缩略图
+----------------------------------------------------------
* @static
* @access public
+----------------------------------------------------------
* @param string $image 原图
* @param string $type 图像格式
* @param string $thumbname 缩略图文件名
* @param string $maxWidth 宽度
* @param string $maxHeight 高度
* @param string $position 缩略图保存目录
* @param boolean $interlace 启用隔行扫描
* @param boolean $is_save 是否保留原图
+----------------------------------------------------------
* @return void
+----------------------------------------------------------
*/
function thumb($image,$is_save=true,$suofang=0,$type='',$maxWidth=500,$maxHeight=500,$interlace=true){
// 获取原图信息
$info = $this->getImageInfo($image);
if($info !== false) {
$srcWidth = $info['width'];
$srcHeight = $info['height'];
$type = empty($type)?$info['type']:$type;
$type = strtolower($type);
$interlace = $interlace? 1:0;
unset($info);
if ($suofang==1) {
$width = $srcWidth;
$height = $srcHeight;
} else {
$scale = min($maxWidth/$srcWidth, $maxHeight/$srcHeight); // 计算缩放比例
if($scale>=1) {
// 超过原图大小不再缩略
$width = $srcWidth;
$height = $srcHeight;
}else{
// 缩略图尺寸
$width = (int)($srcWidth*$scale); //147
$height = (int)($srcHeight*$scale); //199
}
}
// 载入原图
$createFun = 'ImageCreateFrom'.($type=='jpg'?'jpeg':$type);
$srcImg = $createFun($image); //创建缩略图
if($type!='gif' && function_exists('imagecreatetruecolor'))
$thumbImg = imagecreatetruecolor($width, $height);
else
$thumbImg = imagecreate($width, $height); // 复制图片
if(function_exists("ImageCopyResampled"))
imagecopyresampled($thumbImg, $srcImg, 0, 0, 0, 0, $width, $height, $srcWidth,$srcHeight);
else
imagecopyresized($thumbImg, $srcImg, 0, 0, 0, 0, $width, $height, $srcWidth,$srcHeight);
if('gif'==$type || 'png'==$type) {
//imagealphablending($thumbImg, false);//取消默认的混色模式
//imagesavealpha($thumbImg,true);//设定保存完整的 alpha 通道信息
$background_color = imagecolorallocate($thumbImg, 0,255,0); // 指派一个绿色
imagecolortransparent($thumbImg,$background_color); // 设置为透明色，若注释掉该行则输出绿色的图
}
// 对jpeg图形设置隔行扫描
if('jpg'==$type || 'jpeg'==$type) imageinterlace($thumbImg,$interlace);
//$gray=ImageColorAllocate($thumbImg,255,0,0);
//ImageString($thumbImg,2,5,5,"ThinkPHP",$gray);
// 生成图片
$imageFun = 'image'.($type=='jpg'?'jpeg':$type);
$length = strlen("00.".$type) * (-1);
$_type = substr($image,-4);
$length = ($type != $_type ? $length+1 : $length);
//裁剪
if ($suofang==1) {
$thumbname01 = substr_replace($image,"01.".$type,$length); //大头像
$thumbname02 = substr_replace($image,"02.".$type,$length); //小头像
# add by meng
$time1 = time();
$thumbname01 = $this->saveDir . $time1 .".". $type;
$time2 = time()+1;
$thumbname02 = $this->saveDir . $time2 .".". $type; $imageFun($thumbImg,$thumbname01,100);
$imageFun($thumbImg,$thumbname02,100); $thumbImg01 = imagecreatetruecolor(190,195);
imagecopyresampled($thumbImg01,$thumbImg,0,0,$_POST['x'],$_POST['y'],190,195,$_POST['w'],$_POST['h']); $thumbImg02 = imagecreatetruecolor(70,70);
imagecopyresampled($thumbImg02,$thumbImg,0,0,$_POST['x'],$_POST['y'],70,70,$_POST['w'],$_POST['h']); $imageFun($thumbImg01,$thumbname01,100);
$imageFun($thumbImg02,$thumbname02,100);
// unlink($image);
imagedestroy($thumbImg01);
imagedestroy($thumbImg02);
imagedestroy($thumbImg);
imagedestroy($srcImg); return array('big' => $thumbname01 , 'small' => $thumbname02); //返回包含大小头像路径的数组
}else{
if($is_save == false){ //缩略图覆盖原图，缩略图的路径还是原图路径
$imageFun($thumbImg,$image,100);
}else{
$thumbname03 = substr_replace($image,"03.".$type,$length); //缩略图与原图同时存在，
$imageFun($thumbImg,$thumbname03,100); imagedestroy($thumbImg);
imagedestroy($srcImg);
return $thumbname03 ; //返回缩略图的路径，字符串
}
} }
return false;
}
}
///***************
// ./uploads/2011/6/23/201106231015231234985800.jpg ----->上传到服务器上的原始图
// ./uploads/2011/6/23/201106231015231234985801.jpg ----->裁剪的大头像 190*195
// ./uploads/2011/6/23/201106231015231234985802.jpg ----->裁剪的小头像 48*48
// ./uploads/2011/6/23/201106231015231234985803.jpg ----->超过规定尺寸后的缩略图
建议debug一下形成时的srcImg和thumbImg
只要你没有移动剪切框，就不会产生第二次上传，从而造成黑色图片
由于你给出的代码不全，无法进行测试。只能按你的描述来判断问题二：这是个简单的“比例”，小学就学过了吧
http://bbs.csdn.net/topics/390435890
谢谢各位的回答，但本人还是没能解决，可能是基础不好的原因吧，希望各位大虾能说详细点，谢谢各位。
http://www.162100.com/162100screenshots/