Heim >php教程 >PHP源码 >jcrop插件+php实现的图片上传与裁剪

jcrop插件+php实现的图片上传与裁剪

PHP中文网
PHP中文网Original
2016-05-25 17:13:531297Durchsuche


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
}	
?>

                   


                   

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn