2

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?

AVProgrammer
  • 1,344
  • 2
  • 20
  • 40
dhruv maverick
  • 31
  • 1
  • 1
    Why not just add blur class when reusing it ? I mean its a css effect, afaik you can't save it in db like just like that. – Jules R Nov 27 '18 at 07:47
  • how to add a blur class to a image if there is data blur on a column effects @JulesR – dhruv maverick Nov 27 '18 at 07:53
  • In you html code like you did, `class="blur"` – Jules R Nov 27 '18 at 07:57
  • actually i am not only using blur effect user can select multiple effects now i am thinking that i should store the value of effect in database for ex if a user chooses blur effect i should save blur effect in database assigned to that image and when ill output the images through database then according to their effects in database should cahnge image's class can i do that if yes plzz tell me how can i?? @JulesR – dhruv maverick Nov 27 '18 at 08:07
  • 1
    Alright, you should edit your question to add that there are different effects. Now assuming that each effect corresponds to a class, you can add a column in the db with the name of the class and then `echo ""` – Jules R Nov 27 '18 at 08:09
  • yup thanx alot buddy – dhruv maverick Nov 27 '18 at 08:15
  • Your code sample appears to be missing a closing brace "}", the one corresponding to `if ($upload) {`. – AVProgrammer Dec 22 '18 at 01:07

2 Answers2

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.

Bartek Zawada
  • 111
  • 6
0

there are at least 3 approaches to this:

  1. send the applied effects (types and params) to the server and then apply them again on server;
  2. send them to the server and save them besides the image and apply them again when you use the image on front-end;
  3. use html canvas to load the image, apply filters in it and then upload.

The first one is the simplest to implement and was discussed in comments already. The main drawback is – you have to always load images along with effects which is easy to forget unless you use a helper in your templating engine.

I would probably avoid the second one since it is language-dependent so you can't create a solution that you can always use later. It's probably simple to find a lib for, say, Python, and may be less simple for PHP or Ruby (or even it can be missing for some languages).

The third option seems to be the most robust. There are several options of implementing that, here they suggest at least:

YakovL
  • 7,557
  • 12
  • 62
  • 102