使用 CrobBox 将裁剪后的图像上传到 PHP

Posted 2023-02-25

【中文标题】使用 CrobBox 将裁剪后的图像上传到 PHP

【英文标题】：Upload cropped image to PHP using CrobBox

【发布时间】：2018-01-12 11:41:41

【问题描述】：

我的脚本正在工作，因为它在 html div 中显示上传和裁剪的图像。

将图片上传到php文件夹中并在mysql数据库中有图片的步骤是什么？

裁剪框：https://github.com/hongkhanh/cropbox

<?php
    // Image avatar update 
     if (isset($_POST['submitavatar']))


         $name = $_FILES["fileToUpload"]["name"];
         $name = mt_rand(100000, 999999).$name;
         $uploadtmp = $_FILES["fileToUpload"]["tmp_name"];
         $target_dir = "avatarprofile/";
         $target_file = $target_dir . basename($name);
         $uploadOk = 1;
         $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);

         $name = preg_replace("#[^a-z0-9.]#i", "", $name);

         // Check if image file is a actual image or fake image
         if(isset($_POST["submit"])) 
         $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
         if($check !== false) 
             echo "File is an image - " . $check["mime"] . ".";
         $uploadOk = 1;
          else 
             echo "File is not an image.";
             $uploadOk = 0;
         
         
         // Check if $uploadOk is set to 0 by an error
         if ($uploadOk == 0) 
             echo "Sorry, your file was not uploaded.";
         // if everything is ok, try to upload file
          else 

             $updateavatar = $name;
                 $sql = "UPDATE users SET avatar = '$updateavatar' WHERE userID = $user";
                 $result = $con->query($sql);

                 $img= $_SESSION["avatar"];
                 unlink("./avatarprofile/$img");

             header('Location: profile-settings-avatar.php');
          else 
             echo "Sorry, there was an error uploading your file.";
         
         
     
    ?>

<div class="container">
                 <div class="imageBox">
                     <div class="thumbBox"></div>
                     <div class="spinner" style="display: none">Loading...</div>
                 </div>
                 <div class="action">
                     <input type="file" name="fileToUpload" id="file" style="float:left; width: 250px">
                     <input type="button" id="btnCrop" value="Crop" style="float: right">
                     <input type="button" id="btnZoomIn" value="+" style="float: right">
                     <input type="button" id="btnZoomOut" value="-" style="float: right">
                 </div>
             <form action="profile-settings-avatar.php" method="POST" enctype="multipart/form-data">
             <div type="file" class="cropped">

             </div>
             <input type="submit" id="uploadimagebutton" value="Upload" name="submitavatar">
             </form>
             </div>

链接javasript：https://github.com/hongkhanh/cropbox

【问题讨论】：

要将图片路径保存到数据库需要建立连接（建议使用\PDO）。旁注：您在header('Location: ... 之后忘记了exit;。发送标头不会停止执行脚本。

这不是php的问题。如果我输入表格enctype =“multipart / form-data，所有内容都会定期保存在文件夹中并保存在mysql中，但我需要一个更可爱的脚本来编辑图像并在javascript中工作。”脚本将剪切的图片保存在 class= "cropped" 图像中。它以 img src 格式保存...如何将此图像从 PHP 保存到文件夹和数据库？请帮助这个我迫切需要它我整天都在等待答案。链接脚本已启动...

我已经稍微改进了你的问题。

【参考方案1】：

您需要将图像获取为blob（二进制大对象）。

CropBox 支持其文档中所述的两种方法：

支持dataUrl显示图片（函数getDataURL） 支持 Blob 上传图片（函数 getBlob）

将图像作为 blob 获取后，通过 Ajax 将其发送到服务器，您可以将其保存到文件系统/数据库中。

这样的事情就可以了：

// Executed when clicking a save button for example

function saveImageToServer() 
  var formData = new FormData();

  formData.append('croppedImage', cropper.getBlob());

  $.ajax('upload.php', 
    method: "POST",
    data: formData,
    success: function () 
      console.log('Upload success');
    ,
    error: function () 
      console.log('Upload error');
    
  );
);

【讨论】：

这是否可以在没有 ajax、普通形式和 php 的情况下完成？如果可能怎么做？

或者如何获取裁剪后的文件并通过输入类型“文件”或其他方法 POST 发送。谢谢。或者获取图像并作为 blob 发送？？

您可以使用 JavaScript 和 Ajax 像普通文件一样通过 POST 发送文件。