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

【问题标题】：How to save an image altered with CSS to database如何将使用 CSS 更改的图像保存到数据库
【发布时间】：2019-04-28 21:41:14
【问题描述】：

我有一张图片，我希望能够通过 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";
    }
  }
}
}

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

【问题讨论】：

为什么不在重用的时候添加模糊类呢？我的意思是它是一个 css 效果，afaik 你不能像那样将它保存在数据库中。
如果列效果上存在数据模糊，如何为图像添加模糊类@JulesR
在你的html代码中，class="blur"
实际上我不仅使用模糊效果用户可以选择多个效果现在我想我应该将效果的值存储在数据库中如果用户选择模糊效果我应该将模糊效果保存在数据库中分配给该图像，当通过数据库输出图像时，根据它们在数据库中的效果应该改变图像的类，如果是，我可以这样做吗？请告诉我我该怎么做？ @JulesR
好的，您应该编辑您的问题以添加不同的效果。现在假设每个效果对应一个类，你可以在db中添加一个带有类名的列，然后echo "<img src='$img->path' class='$img->effect'>"

标签： javascript php html css

【解决方案1】：

至少有 3 种方法：

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

第一个是最容易实现的，并且已经在 cmets 中讨论过。主要缺点是 - 您必须始终加载图像以及很容易忘记的效果，除非您在模板引擎中使用帮助程序。

我可能会避免使用第二个，因为它依赖于语言，因此您无法创建一个以后可以随时使用的解决方案。例如，为 Python 找到一个库可能很简单，而对于 PHP 或 Ruby 来说可能不那么简单（甚至某些语言可能会丢失它）。

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

使用StackBlur
使用 pixastic 库
在画布中上下缩放图像
使用filter（需要注意浏览器支持）
使用gaussian blur via IIR filter implementation

【讨论】：

【解决方案2】：

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

【讨论】：