jcrop插件+php实现的图片上传与裁剪-PHP源码-php.cn

jcrop插件+php实现的图片上传与裁剪
PHP中文网
リリース： 2016-05-25 17:13:53
オリジナル
1302 人が閲覧しました
1. [图片] .jpg

jcrop插件+php实现的图片上传与裁剪
2. [文件] demo.rar

jcrop插件+php实现的图片上传与裁剪 demo.rar
3. [代码][PHP]代码

<?php
error_reporting(7);
date_default_timezone_set("Asia/Shanghai");
header("Content-type:text/html; Charset=utf-8");
require_once("./image.class.php");

$images = new Images("file");

if ($_GET[&#39;act&#39;] == &#39;cut&#39;){	
	$image = "0000.jpg";
	$res = $images->thumb($image,false,1);
	if($res == false){
		echo "裁剪失败";
	}elseif(is_array($res)){
		echo &#39;<img src="&#39;.$res[&#39;big&#39;].&#39;" style="margin:10px;">&#39;;
		echo &#39;<img src="&#39;.$res[&#39;small&#39;].&#39;" style="margin:10px;">&#39;;
	}elseif(is_string($res)){
		echo &#39;<img src="&#39;.$res.&#39;">&#39;;
	}
}elseif(isset($_GET[&#39;act&#39;]) && $_GET[&#39;act&#39;] == "upload"){
	
	$path = $images->move_uploaded();
	$images->thumb($path,false,0);							//文件比规定的尺寸大则生成缩略图，小则保持原样
	if($path == false){
		$images->get_errMsg();
	}else{
		echo "上传成功！<a href=&#39;".$path."&#39; target=&#39;_blank&#39;>查看</a>";
	}
}else{
?>
<!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.min.js" type="text/javascript"></script>
  <script src="./js/jquery.Jcrop.js" type="text/javascript"></script>
  <link rel="stylesheet" href="./css/jquery.Jcrop.css" type="text/css" />
<script type="text/javascript">

    jQuery(function($){

      // Create variables (in this scope) to hold the API and image size
      var jcrop_api, boundx, boundy;
      
      $(&#39;#target&#39;).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)
	{
		$(&#39;#x&#39;).val(c.x);
		$(&#39;#y&#39;).val(c.y);
		$(&#39;#w&#39;).val(c.w);
		$(&#39;#h&#39;).val(c.h);
	};
	function checkCoords()
	{
		if (parseInt($(&#39;#w&#39;).val())) return true;
		alert(&#39;Please select a crop region then press submit.&#39;);
		return false;
	};
      function updatePreview(c){
        if (parseInt(c.w) > 0)
        {
          var rx = 48 / c.w;		//小头像预览p的大小
          var ry = 48 / c.h;

          $(&#39;#preview&#39;).css({
            width: Math.round(rx * boundx) + &#39;px&#39;,
            height: Math.round(ry * boundy) + &#39;px&#39;,
            marginLeft: &#39;-&#39; + Math.round(rx * c.x) + &#39;px&#39;,
            marginTop: &#39;-&#39; + Math.round(ry * c.y) + &#39;px&#39;
          });
        }
	    {
          var rx = 199 / c.w;		//大头像预览p的大小
          var ry = 199 / c.h;
          $(&#39;#preview2&#39;).css({
            width: Math.round(rx * boundx) + &#39;px&#39;,
            height: Math.round(ry * boundy) + &#39;px&#39;,
            marginLeft: &#39;-&#39; + Math.round(rx * c.x) + &#39;px&#39;,
            marginTop: &#39;-&#39; + Math.round(ry * c.y) + &#39;px&#39;
          });
        }
      };
    });

  </script>
 </head>
 <body>
	<form method="post" action="?act=upload" enctype="multipart/form-data">
		<input type="file" name="file">
		<input type="submit" value="上传">
	</form>
	<p style="float:left;"><img id="target" src="0000.jpg"  ></p>
	<p style="width:48px;height:48px;margin:10px;overflow:hidden; float:left;"><img  style="float:left;" id="preview" src="0000.jpg" ></p>
	<p style="width:190px;height:195px;margin:10px;overflow:hidden; float:left;"><img  style="float:left;" id="preview2" src="0000.jpg" ></p>
	<form action="index.php?act=cut" method="post" onsubmit="return checkCoords();">
		<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="submit" value="裁剪" />
	</form>
 </body>
</html>
<?php
}	
?>
ログイン後にコピー