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

Question

我的脚本正在工作，因为它在 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

Answer 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');
    }
  });
});