صور المحاصيل البسيطة مع Jquery & بي أتش بي




Hai all Ketemu lagi bersama saya portgas tea, dah lama nih gak bikin tutorial karena sibuk kerjaan jadi kuli bangunan hehe , setelah kemaren update رماد 1.0.4 yang alhamdulilah kelar juga walaupun masih banyak kekurangan, kali ini saya bikin tutorial tentang Crop Images dengan Jquery & بي أتش بي moga akan bermanfaat.

Ok langsung saja sebelumnya kita download dulu file jquery & css nya bisa anda search di google jquery.Jcrop.min.js & jquery.Jcrop.css, kita buat directory baru di htdocs & simpan file jquery.Jcrop.min.js & jquery.Jcrop.css yang sudah kita download.

Lalu kita buat file index.php baru, dan kita masukan jquery.Jcrop.css seperti dibawah ini didalam <رئيس>

<!DOCTYPE html>
<أتش تي أم أل لانج="en">
  <رئيس>
    <أحرف التعريف="utf-8">
    <عنوان>Crop Images With Jquery & بي أتش بي</عنوان>
    <اسم ميتا="viewport" المحتوى="width=device-width, المقياس الأولي = 1.0">
    <اسم ميتا="description" المحتوى="">
    <اسم ميتا="author" المحتوى="">
 
    <رابط href="assets/css/jquery.Jcrop.css" rel="stylesheet" وسائل الإعلام="screen">
 
    	<style type="text/css"> // untuk pengaturan  warna & ukuran kotak yang kita blok 
  #استهداف {
    background-color: #ccc;
    width: 500مقصف;
    height: 330مقصف;
    font-size: 24مقصف;
    display: block;
  }
 
  </رئيس>

Sekarang di dalam <الجسم> kita buat seperti ini :

<شعبة صف دراسي="container">
<img src="demo_files/15845sg.jpg" هوية شخصية="cropbox" />
<form action="index.php" method="post" onsubmit="return checkCoords();">
<input type="hidden" هوية شخصية="x" name="x" />
<input type="hidden" هوية شخصية="y" name="y" />
<input type="hidden" هوية شخصية="w" name="w" />
<input type="hidden" هوية شخصية="h" name="h" />
<input type="submit" value="Crop Image" صف دراسي="btn btn-large btn-success" />
</form>
</شعبة>

Masih didalam <الجسم> kita buat seperti dibawah ini :




<النصي src="assets/js/jquery.js"></النصي>
 
	<النصي src="assets/js/jquery.Jcrop.min.js"></النصي>
		<script type="text/javascript">
 
                  $(وظيفة(){
 
                    $('#cropbox').Jcrop({
                      aspectRatio: 1,
                      onSelect: updateCoords
                    });
 
                  });
 
                  وظيفة updateCoords(c)
                  {
                    $('#x').val(c.x);
                    $('#y').val(c.y);
                    $('#w').val(c.w);
                    $('#h').val(c.h);
                  };
 
                  وظيفة checkCoords()
                  {
                    إذا (parseInt($('#w').val())) إرجاع صحيح;
                    alert('Please select a crop region then press submit.');
                    إرجاع خاطئة;
                  };
 
                </النصي>

Nah setelah itu kita buat fungsi PHP seperti dibawah ini yang berfungsi untuk memotong gambar sesuai ukuran yang kita inginkan.




<?بي أتش بي
 
إذا ($_SERVER['REQUEST_METHOD'] == 'POST')
{
	$targ_w = $targ_h = 200; 
	$jpeg_quality = 100;
 
	$src = 'demo_files/15845sg.jpg';
	$img_r = imagecreatefromjpeg($src);
	$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
 
	imagecopyresampled($dst_r,$img_r,0,0,$_بريد['x'],$_بريد['y'],
	$targ_w,$targ_h,$_بريد['w'],$_بريد['h']);
 
	رأس('Content-type: image/jpeg');
	imagejpeg($dst_r,null,$jpeg_quality);
 
	خروج;
}?>

Nah selesai deh mudah bukan ???? Script lengkap nya bisa lihat dibawah ini

<?بي أتش بي
 
إذا ($_SERVER['REQUEST_METHOD'] == 'POST')
{
	$targ_w = $targ_h = 200;  //ukuran gambar
	$jpeg_quality = 100;
 
	$src = 'demo_files/15845sg.jpg';  //link gambar
	$img_r = imagecreatefromjpeg($src);
	$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
 
	imagecopyresampled($dst_r,$img_r,0,0,$_بريد['x'],$_بريد['y'],
	$targ_w,$targ_h,$_بريد['w'],$_بريد['h']);
 
	رأس('Content-type: image/jpeg');
	imagejpeg($dst_r,null,$jpeg_quality);
 
	خروج;
}?>
 
<!DOCTYPE html>
<html lang="en">
  <رئيس>
    <meta charset="utf-8">
    <عنوان>Crop Images With Jquery & بي أتش بي</عنوان>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
 
    <!-- Le styles -->
	    <link href="assets/css/bootstrap.css" rel="stylesheet" media="screen">
        <link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
		<link href="assets/css/jquery.Jcrop.css" rel="stylesheet" media="screen">
 
 
	<style type="text/css">
  #استهداف {
    background-color: #ccc;
    width: 500مقصف;
    height: 330مقصف;
    font-size: 24مقصف;
    display: block;
  }
</أسلوب>
 
    <أسلوب>
      الجسم {
        padding-top: 60مقصف; /* 60بكسل لجعل الحاوية تذهب طوال الطريق إلى أسفل الشريط العلوي */
      }
    </أسلوب>
 
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></النصي>
    <![إنهاء إذا]-->
 
    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
                    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
                                   <link rel="shortcut icon" href="assets/ico/favicon.png">
  </رئيس>
 
  <الجسم>
 <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></امتداد>
            <span class="icon-bar"></امتداد>
            <span class="icon-bar"></امتداد>
          </زر>
          <a class="brand" href="http://andeznet.com">AndezNet</أ>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <في ال><a href="#">الصفحة الرئيسية</أ></في ال>
			  <li class="active"><a href="#">Gambar</أ></في ال>
              <في ال><a href="#">تسجيل خروج</أ></في ال>
            </ال>
          </شعبة><!--/.nav-collapse -->
        </شعبة>
      </شعبة>
    </شعبة>
 
<div class="container">
<img src="demo_files/15845sg.jpg" id="cropbox" />
		<form action="index.php" 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="Crop Image" class="btn btn-large btn-success" />
		</form>
</شعبة>
 
	<div class="row-fluid">
			<div class="span12">
			  <div class="row-fluid">
				<div class="alert alert-info">
					<a name="contact"></أ>
				  <h2>www.andeznet.com</h2>
				  <p class="text-info">Gudang Teknologi & Informasi</p>
				  <p>&copy; <a href="http://andeznet.com">www.andeznet.com</أ>&nbsp<?بي أتش بي صدى صوت date("Y");?></p>
				</شعبة><!--/span-->
			  </شعبة><!--/row-->
			</شعبة><!--/span-->
	</شعبة><!--/row-->
 
 
    <script src="assets/js/jquery.js"></النصي>
	<script src="assets/js/bootstrap.min.js"></النصي>
	<script src="assets/js/jquery.Jcrop.min.js"></النصي>
			<script type="text/javascript">
 
                  $(وظيفة(){
 
                    $('#cropbox').Jcrop({
                      aspectRatio: 1,
                      onSelect: updateCoords
                    });
 
                  });
 
                  function updateCoords(c)
                  {
                    $('#x').val(c.x);
                    $('#y').val(c.y);
                    $('#w').val(c.w);
                    $('#h').val(c.h);
                  };
 
                  function checkCoords()
                  {
                    إذا (parseInt($('#w').val())) return true;
                    alert('Please select a crop region then press submit.');
                    return false;
                  };
 
                </النصي>
 
  </الجسم>
</لغة البرمجة>

Jika sudah benar maka akan muncul seperti dibawah ini:

cropimages

Ok sekian Tutorial kali ini moga bermanfaat jika mau source lengkap nya bisa download dibawah ini .
تحميل




ترميز سعيد & برمجة

 

ربما يعجبك أيضا...

اترك رد

لن يتم نشر عنوان بريدك الإلكتروني. الحقول المطلوبة محددة *