如何将使用CSS更改的图像保存到数据库中

Question

I have an image and I want to be able to apply one or more effects to the image through css (eg. blur). I want to store the modified version of the image to the database. How can I do that? This is my code. Html:

<img src="avatar.jpg" class="blur"></img>    
<button type="submit" name="uploadimg" class="btn btn-info" style="width: 90px; height: 40px; margin-top: 2%;"> <a class="upload" href=""></a>upload</button>

css:

.blur {
    -webkit-filter: blur(5px);
            filter: blur(5px);
}

This is my upload script:

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

  $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("uploads/$rand_dir_name");
        $final_file = "uploads/$rand_dir_name/$avatar_name";

        $upload = move_uploaded_file($avatar_tmpname, $final_file);
        if ($upload) {
          unlink("$avatar_path");
          $msg = "file uploaded successfully ";
          $query = "UPDATE users SET avatar_path='$final_file' WHERE id='$id'";
          $fire = mysqli_query($con,$query) or die("can not insert file path into database".mysqli_error($con));
          $query = "UPDATE likes SET avatar_path='$final_file' WHERE user_id='$id'";
          $fire = mysqli_query($con,$query) or die("can not insert file path into database".mysqli_error($con));
          $query = "UPDATE photos SET avatar_path='$final_file' WHERE uid='$id'";
          $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";
          }

          # 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";
    }
  }
}
}

It saves the avatar path to the database and saves the image in a folder. But how can I save the modified version of the image instead?

Answer 1

Store image source in a database, and optional CSS effects selected by user store in separate columns, for example, you can create a new column in image table, named "is_blur" and if the user has selected this option set it to true.