PHP

PHP ile JQuery’de Resmi Kırpın ve Yükleyin. Yüklemeden önce resmi kırpın.

JQuery ve PHP’nin nasıl Kırpılıp Kaydedileceğini zaten biliyor musunuz? Bu yazıda JQuery Croppie eklentisi yardımıyla görüntünün nasıl kırpılacağını tartışacağız. Ayrıca kırpılan görüntüyü JQuery, Ajax ve PHP yardımıyla yükleyeceğiz. Resim eklerken, kişinin web sitesine herhangi bir uzunlukta resim eklemesi nedeniyle Resim Kırpma özelliği gereklidir, ancak resmin belirli sabit yükseklik ve genişliğini yüklememiz gerekir, bu nedenle bu noktada resim kırpma özelliği sunmuşsak kullanıcı daha sonra sunucumuza gerekli uzunlukta resim ekleyebilir.

JQuery Croppie eklentisi, birçok yapılandırma seçeneği ile hızlı, kullanımı kolay bir görüntü kırpma eklentisidir. Html5 tuval tabanlı bir görüntü kırpma kitaplığıdır. Bu eklenti, croppie() kullanılarak başlatıldı. Bu yaklaşım altında, seçimi ihtiyacımıza uygun olarak da özetleyebiliriz. Bu eklentide iki tür görüntü kırpma vardır. Birinci tür daire, diğeri kare. Daire kullanarak fotoğrafı daire içinde kırpabiliriz. Kareyi kullanarak kare uzunluğunda da kırpabiliriz. Bu yaklaşımda ayrıca genişlik ve yüksekliği de özetleyebiliriz. Base64 formatında resim göndereceğiz ve bu resim formatını Ajax kullanarak php scriptine göndereceğiz. PHP betiğinde file_put_contents() işlevini kullandık, bu işlev çalışma klasörümüz altında kırpma görüntüsü oluşturacaktır.

Aşağıda JQuery ve PHP’de görüntü kırpma uygulama adımları verilmiştir.

Adım 1. index.php dosyası oluşturun.
<html>  
  <head>  
    <title>Crop And Upload Image In JQuery With PHP</title>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.css" />
  </head>  
    <body>  
      <div class="container">          
          <h3 align="center">Crop And Upload Image In JQuery With PHP</h3>      
          <div class="panel panel-primary">
            <div class="panel-heading">Select Image</div>
              <div class="panel-body" align="center">
                <input type="file" name="upload_image" id="upload_image" />           
              </div>
          </div>
      </div>

    <div  id="uploadimage" style="display:none" class="container">          
        <div class="panel panel-primary">
          <div class="panel-heading">Upload & Crop Image</div>
            <div class="panel-body" align="center">
              <div id="image_demo" style="width:350px; margin-top:30px"></div>
              <div id="uploaded_image" style="width:350px; margin-top:30px;"></div>            
            </div>
            <div class="panel-footer"> <button class="btn btn-success crop_image">Crop & Upload Image</button></div>           
        </div>
    </div>
    </body>  
</html>

 
<script>  
$(document).ready(function(){

 $image_crop = $('#image_demo').croppie({
    enableExif: true,
    viewport: {
      width:200,
      height:200,
      type:'circle' //circle
    },
    boundary:{
      width:300,
      height:300
    }
  });

  $('#upload_image').on('change', function(){
    var reader = new FileReader();
    reader.onload = function (event) {
      $image_crop.croppie('bind', {
        url: event.target.result
      }) 
    }
    reader.readAsDataURL(this.files[0]);
    $('#uploadimage').show();
  });

  $('.crop_image').click(function(event){
    $image_crop.croppie('result', {
      type: 'canvas',
      size: 'viewport'
    }).then(function(response){
      $.ajax({
        url:"upload.php",
        type: "POST",
        data:{"image": response},
        success:function(data)
        {
           $('#uploaded_image').html(data)
        }
      });
    })
  });

});  
</script>

Adım 2. upload.php dosyası oluşturun.

<?php
if(isset($_POST["image"]))
{
 $data = $_POST["image"];
 $image_array_1 = explode(";", $data);
 $image_array_2 = explode(",", $image_array_1[1]);
 $data = base64_decode($image_array_2[1]);
 $imageName = time() . '.png';
 file_put_contents($imageName, $data);
 echo '<img src="'.$imageName.'" class="img-thumbnail" />';
}

?>

PHP ve JQuery Kullanarak Sonsuz Kaydırma Sayfalandırması. JQuery Kullanarak İlerleme Çubuğu ile Çok Adımlı Form.

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu