как применить фильтры к фотографии и сохранить ее в базе данных php css javascript

Я пытаюсь создать систему, в которой пользователь может выбрать pic из своей галереи, а затем применить к нему фильтр размытия, а затем он может загрузить этот pic в базу данных, теперь у меня есть успех в применении фильтра к рис., но я не могу загрузить что отфильтрованный pic в базе данных, когда я вижу загруженную картинку, нормально не размывается, я не уверен, что в этом не так.

это мой код

<?php
$query = "SELECT * FROM users WHERE email='$email'or username = '$email'";
$fire = mysqli_query($con,$query) or die("can not fetch data from database ".mysqli_error($con));
if (mysqli_num_rows($fire)>0) {
  $row = mysqli_fetch_assoc($fire);
  $id = $row['id'];
  $username = $row['fullname'];
  $avatarpath = $row['avatar_path'];



if (isset($_POST['uploadpic'])) {

  $avatar = $_FILES['avatar'];
   $avatar_name = $_FILES['avatar']['name'];
   $avatar_tmpname = $_FILES['avatar']['tmp_name'];
   $avatar_size =  $_FILES['avatar']['size'];
   $avatar_type = $_FILES['avatar']['type'];
   $avatar_ext = pathinfo($avatar_name, PATHINFO_EXTENSION);

   if (!empty($avatar_name)) {
    if ($avatar_size <= 25000000) {
      if ($avatar_ext == "jpg" || $avatar_ext == "jpeg" ||$avatar_ext == "png" ) {
        $chars= "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        $rand_dir_name=substr(str_shuffle($chars),0,15);
        mkdir("userdata/user_photos/$rand_dir_name");
         $final_file= "userdata/user_photos/$rand_dir_name/$avatar_name";


   $upload = move_uploaded_file($avatar_tmpname, $final_file);
   if ($upload) {
     $msg = "file uploaded successfully ";
     $query = "INSERT INTO photos(id,uid,image_url,email,date_posted,username,avatar_path) VALUES ('','$id','userdata/user_photos/$rand_dir_name/$avatar_name','$email',NOW(),'$username','$avatarpath')";
     $fire = mysqli_query($con,$query) or die("can not insert file path into database".mysqli_error($con));

     if ($fire) {
       $msg .=" and also inserted into database";
      header("Location:profile.php");
     }



        # code...
      }else{ echo "only jpg,jpeg,png, type format allowed";}
    }else{echo "file size is too large";}

   }else{echo "please select an image to upload";}


}  
  }

}

?>
<center>

   <form action="profile.php" method="POST" enctype="multipart/form-data">
      <input type="file" onchange="previewImage(event)" id="file-feild" class="form-control" name="avatar" >

      <button type="submit" name="uploadpic" > <a class="upload" href="profile.php"><i class="fas fa-upload"></i></a></button>

    </form>
  <div class="card">
  <img src="img_avatar.png" alt="Avatar"id="image-field" style="width:100%">
  <div class="container">

    <input type="button" id="blur" name="button" value="button"  data-filter="blur">
     <input type="button" id="none" name="button" value="button"  data-filter="blur">

  </div>
</div>
</center>



<script src="jquery.min.js"></script>
<script type="text/javascript">
  $(document).on('click','#blur',function(e){
$('#image-field').css({'filter':'blur(20px)'})
 });
</script>
<script type="text/javascript">
  $(document).on('click','#none',function(e){
$('#image-field').css({'filter':'blur(0px)'})
 });
</script>

<script type="text/javascript">


  function previewImage(event) {
   var reader = new FileReader();
   var imageField = document.getElementById("image-field")
   reader.onload = function(){
    if(reader.readyState == 2){
      imageField.src = reader.result;
    }
   }
    reader.readAsDataURL(event.target.files[0]);
  }
</script>

любая помощь была бы оценена thanx