如何将过滤器应用于照片并将其保存到数据库 php css javascript

Posted 2023-05-09

【中文标题】如何将过滤器应用于照片并将其保存到数据库 php css javascript

【英文标题】：how to apply filters to photo and save it to database php css javascript

【发布时间】：2019-02-27 02:29:27

【问题描述】：

我正在尝试制作一个系统，用户可以从他的画廊中选择一张图片，然后对其应用模糊过滤器，然后他可以将该图片上传到数据库，现在我已成功将过滤器应用于图片，但是当我看到上传的图片时，我无法将过滤后的图片上传到数据库中，这是正常的，没有模糊我不确定它出了什么问题

这是我的代码

<?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";
    elseecho "file size is too large";

   elseecho "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" 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>

感谢您的任何帮助

【问题讨论】：

请参阅准备好的和绑定的查询

【参考方案1】：

CSS 模糊是客户端操作，而您正在寻找服务器端操作（您希望将操作后的图像保存在服务器上）。换句话说，CSS 要求将非模糊图像存储在服务器上并发送到浏览器，而您希望将模糊图像存储在服务器上。因此，您必须忘记 CSS。模糊处理应该在服务器端语言中完成，比如 PHP，使用 GD 或 ImageMagick。

这是blurring in PHP上的帖子。

【讨论】：

有什么方法可以让用户看到其图像的实时变化，然后当他点击上传时，特定的过滤器会像 instagram 一样在上传代码上运行

您可以创建效果，但它不会那样工作。它应该像这样工作：第 1 步 = 上传图片。第 2 步 = 使用 CSS 预览模糊。第 3 步 = 使用与第 2 步相同的设置使用 PHP 模糊服务器图像。

有没有例子可以显示这种东西，请帮助我