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

Question

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

将映像上传到文件夹中的PHP并在mysql数据库中包含映像的步骤是什么？

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