Question

我有一张图像，并且希望能够通过CSS将一种或多种效果应用于图像（例如模糊）。我想将图像的修改后的版本存储到数据库中。我怎样才能做到这一点？这是我的代码。 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);
}

这是我的上传脚本：

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

它将头像路径保存到数据库，并将图像保存在文件夹中。但是，我该如何保存图像的修改版本呢？

Answer 1

将图像源存储在数据库中，用户选择的可选CSS效果存储在单独的列中，例如，您可以在图像表中创建一个名为“ is_blur”的新列，如果用户选择了此选项，则将其设置为是的。

Answer 2

至少有3种方法：

将应用的效果（类型和参数）发送到服务器，然后在服务器上再次应用；
将它们发送到服务器并保存在图像旁边，然后在前端使用图像时再次应用它们；
使用html canvas加载图像，在其中应用过滤器，然后上传。

第一个是最简单的实现，并且已经在注释中进行了讨论。主要缺点是–除非您在模板引擎中使用辅助工具，否则您必须始终加载容易忘记的图像以及效果。

我可能会避免使用第二种语言，因为第二种语言是与语言相关的，因此您无法创建以后可以始终使用的解决方案。为例如Python找到一个库可能很简单，而对于PHP或Ruby则可能不太简单（甚至某些语言可能会缺少它）。

第三个选项似乎是最可靠的。有几种实现方法，here至少建议：

使用StackBlur
使用像素库
上下缩放画布中的图像
使用filter（需要获得浏览器支持）
使用gaussian blur via IIR filter implementation

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

2 个答案: