Merhabalar; Bu makalede Jquery ile görselleri kroplamayı kolaylaştıran Jcrop adlı eklenti kullanmayı öğreneceğiz. Hazırsak başlayalım:
Öncelikle jQuery Jcrop eklentisini indirin ve gerekli dosyaları HTML kodunuzun head bölümüne ekleyin.
Aşağıdaki HTML kodu, bir görüntü dosyası alarak ve görüntüyü kırpmak ve çıktı kırpılmış görüntüyü başka bir HTML "div" içinde göstermek için bir "Görüntüyü Kırp" düğmesi vererek Jcrop eklentisini gösterir.
<!DOCTYPE html> <html> <head> <!-- All the required libraries to crop the image--> <link rel="stylesheet" href="jquery.Jcrop.min.css" type="text/css" /> <script src="jquery.min.js"></script> <script src="jquery.Jcrop.min.js"></script> <style> body { width: 500px; height: 380px; font-family: Arial, Sans-serif; } .btnSubmitClass { background-color: #696969; padding: 5px 30px; border: #696969 1px solid; border-radius: 4px; color: #FFFFFF; margin-top: 10px; } input#cropBtnID { padding: 5px 25px 5px 25px; background: #D3D3D3; border: #98b398 1px solid; color: #FFF; visibility: hidden; } #outputImage { margin-top: 40px; } </style> </head> <body> <h2> How to crop image using jQuery and PHP </h2> <div> <img src="gfg2.jpg" id="cropImageID" class="img" /><br /> </div> <div id="btn"> <input type='button' id="cropBtnID" value='Crop Image'> </div> <div> <img src="#" id="outputImage" style="display:none;"> </div> <script type="text/javascript"> $(document).ready(function () { var size; $('#cropImageID').Jcrop({ /* Some settings for basic configuration*/ allowSelect: true, allowMove: true, allowResize: true, fixedSupport: true, aspectRatio: 1, onSelect: function (c) { size = { x: c.x, y: c.y, w: c.w, h: c.h }; $("#cropBtnID").css( "visibility", "visible"); } //end onSelect }); //end Jcrop method $("#cropBtnID").click(function () { var img = $("#cropImageID").attr('src'); $("#outputImage").show(); $("#outputImage").attr('src', 'image-features.php?x = ' + size.x + ' & y=' + size.y + ' & w=' + size.w + '&h=' + size.h + '&img=' + img); }); });//end document ready fn </script> </body> </html>PHP kodu: Aşağıdaki PHP kodu, yukarıdaki HTML kodunda görüntü ve renk oluşturma için kullanılan "image-features.php" dosyasını uygular. Yeni bir görüntü oluşturmak için kullanılan PHP işlevi, imagecreatefromjpeg() yöntemidir. PHP imagecreatetruecolor() yöntemi kullanılarak yeni bir gerçek renkli görüntü oluşturulur . Kullanılan diğer PHP fonksiyonları ise imagecopyresampled() ve imagejpeg()'dir.
<?php // Create a new image from a file $newImage = imagecreatefromjpeg($_GET['img']); // Create a new true color image $newTruecolorImage = imagecreatetruecolor( $_GET['w'], $_GET['h']); // Copy a portion from one image to another imagecopyresampled($newTruecolorImage, $newImage, 0, 0, $_GET['x'], $_GET['y'], $_GET['w'], $_GET['h'], $_GET['w'], $_GET['h']); header('Content-type: image/jpeg'); // Display image to browser as output imagejpeg($newTruecolorImage); exit; ?>Tüm işlemler bu kadar siz PHP yerine ilgilendiğiniz herhangi bir backend ilede aynı işlemleri yapabilirsiniz.