how to apply filters to photo and save it to database php css javascript

Question

i am trying to make a system in which a user can choose a pic from his gallery and then apply a blur filter on it and then he can upload that pic to database now i am having success in applying filter to the pic but i cant upload that filtered pic in database when i see the uploaded pic it is normal not blured i am not sure whats going wrong in it

this is my code

<?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>

any kind of help would be appreciated thanx

Please see about prepared and bound queries – Strawberry Sep 23 '18 at 09:46 — Strawberry, Sep 23 '18 at 09:46

Mr. Hugo · Accepted Answer · 2018-09-23T09:32:03.263

2

CSS blur is a client side manipulation, while you are looking for a server side manipulation (you want to save the manipulated image on the server). In other words, CSS requires the NON blurred image to stored on the server and sent to the browser, while you want the blurred image to be stored on the server. Therefore, you must forget about CSS. The blur manipulation should be done in a server side language, like PHP, using GD or ImageMagick.

Here is a post on blurring in PHP.

edited Sep 23 '18 at 09:32

answered Sep 23 '18 at 09:27

Mr. Hugo

11,887
3
42
60

is there any way that user can see live changes on its images and then when he clicks upload that particular filter runs on upload code just like instagram – dhruv sunoly Sep 23 '18 at 09:30
You can create the effect, but it does not work like that. It should work like this: Step 1 = upload image. Step 2 = preview blur with CSS. Step 3 = blur server image with PHP with same settings as step 2. – Mr. Hugo Sep 23 '18 at 09:33
is there any example showing this kind of stuff please help me – dhruv sunoly Sep 23 '18 at 13:25

how to apply filters to photo and save it to database php css javascript

1 Answers1