Warning: curl_setopt() [function.curl-setopt]: CURLOPT_FOLLOWLOCATION cannot be activated when safe_mode is enabled or an open_basedir is set in /home/serpito/public_html/wp-content/plugins/amp-plus/amp-plus.php on line 200
PHP:Jquery: Image Crop Thumbnail (JCrop) | - Ajax - Serpito | www.serpito.com - AMP tarafı | Hızlandırılmış Mobil Sayfa

PHP:Jquery: Image Crop Thumbnail (JCrop) | - Ajax - Serpito

jcrop | Quelle: www.serpito.com
PHP:Jquery: Image Crop Thumbnail (JCrop) Posted on 24 Şubat 201012 Ocak 2012 by Atilla Akoğlu

Kullanıcıların profil resimlerini diledikleri ölçüde kesip küçültmelerini sağlayacak bir uygulama geliştirelim. Bir Jquery eklentisi olan Jcrop ile bu işlemi çok pratik bir şekilde yapabiliyoruz.

Uygulama için basit bir index.html dosyası oluşturuyoruz.

index.html

 <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src="jquery.Jcrop.js"></script> <link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" /> <link rel="stylesheet" href="demos.css" type="text/css" /> <script language="Javascript"> $(function(){ $(\'#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() { if (parseInt($(\'#w\').val())) return true; alert(\'Please select a crop region then press submit.\'); return false; }; </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head> <body> <div id="outer"> <div> <div> <h1>Serpito.com - JCrop Demo</h1> <!-- This is the image we\'re attaching Jcrop to --> <img src="antalya.jpg" id="cropbox" /> <!-- This is the form that our event handler fills --> <form action="crop.php" method="post""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="hidden" id="res" name="res" value="antalya.jpg" /> <input type="submit" value="Resimi Kes" /> </form> </div> </div> </div> </body> </html> &nbsp; &nbsp; 

Hidden inputlardan oluşan formun submit edildiğinde veri göndereceği crop.php dosyasını kodlayalım.

crop.php

 <?php error_reporting(E_ERROR); //print_r(Array);  = Array&#91;\'w\'&#93;-Array&#91;\'x\'&#93;;  = Array&#91;\'h\'&#93;-Array&#91;\'y\'&#93;;  = 90;  = Array&#91;\'res\'&#93;; =explode(".",Array&#91;\'res\'&#93;); =&#91;0&#93;; //resimin ismini aliyoruz  = imagecreatefromjpeg();  = ImageCreateTrueColor( ,  ); imagecopyresampled(,,0,0,Array&#91;\'x\'&#93;,Array&#91;\'y\'&#93;,,,Array&#91;\'w\'&#93;,Array&#91;\'h\'&#93;); header(\'Content-type: image/jpeg\'); imagejpeg(, "image/".."_thumb.jpg", ); ?>] &amp;nbsp; 

crop.php ye gönderilen resim üzerindeki kesim noktalarının kordinatları ve x-y uzunlukları crop.php dosyasında imagecopyresampled fonksiyonu tarafından işleniyor.

Yukarıdaki görselde denediğim uygulamanın sonucunda images dizininde antalya_thumb.jpg resimini aşağıda görebilirsiniz.

Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.

This entry was posted in Ajax, CSS, Demo Uygulama, jQuery, PHP and tagged , , , , , , , , . Bookmark the permalink.
Baskı
Içerikten sorumlu:
www.serpito.com
AMP eklentisi aracılığıyla mobil sayfa:
amp-cloud.de
Gizlilik ve Kullanım Şartları:
www.serpito.com
AMP-Update:
20.06.2018 - 09:30:23