Cropperjs 或 Javascript 使用 php 将裁剪后的图像上传到服务器时出现问题

Question

请帮我解决这个问题：

  <h5 style="color: <?php if (isset($color)) { echo $color; } ?>;"><?php if (isset($statusupload)) { echo $statusupload; } ?></h5>
  <form action="index.php" method="post" id="uploadForm" enctype="multipart/form-data">
    <label class="labelforsubmit" for="uploadInput">Choose your image...</label>
    <input important type="file" id="uploadInput" name="file" accept="image/*" onchange="openModal()">
    <br>
    <img id="preview" src="#" alt="Image Preview"></img>
    <div>
      <input type="submit" value="Submit" class="btnsubmit" name="submit_file"></input>
    </div>
  </form>

  <div id="myModal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="closeModal()">&times;</span>
      <h3>Crop Image</h3>
      <div>
        <img id="cropperPreview" src="#" alt="Cropped Image Preview">
      </div>
      <button onclick="applyCroppedImage()">Apply Cropped Image</button>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/image-compressor.js/2.1.0/image-compressor.min.js"></script>

  <script>
    var cropper;
    var selectedImageBase64;

    function openModal() {
      var modal = document.getElementById("myModal");
      modal.style.display = "block";

      if (cropper) {
        cropper.destroy();
        cropper = null;
      }

      var preview = document.getElementById('preview');
      var file = document.getElementById('uploadInput').files[0];
      var reader = new FileReader();

      reader.onloadend = function() {
        selectedImageBase64 = reader.result;
        var cropperPreview = document.getElementById('cropperPreview');
        cropperPreview.src = selectedImageBase64;
        initializeCropperInstance();
      }

      if (file) {
        reader.readAsDataURL(file);
      } else {
        preview.src = "";
      }
    }

    function closeModal() {
      var modal = document.getElementById("myModal");
      modal.style.display = "none";
    }

    function initializeCropperInstance() {
      var image = document.getElementById('cropperPreview');
      cropper = new Cropper(image, {
        aspectRatio: 1,
        viewMode: 1,
        autoCropArea: 1,
        movable: true,
        zoomable: true,
        rotatable: true,
        scalable: true,
        cropBoxResizable: true,
        cropBoxMovable: true,
      });
    }

    function applyCroppedImage() {
      cropper.getCroppedCanvas().toBlob(function(blob) {
        var reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onloadend = function() {
          var base64data = reader.result;
          var croppedImagePreview = document.getElementById('preview');
          croppedImagePreview.src = base64data;
          closeModal();
        };
      }, 'image/jpeg', 0.6);
    }
  </script>
</body>
</html>

Cropperjs 或 Javascript 使用 php 将裁剪后的图像上传到服务器时出现问题。

这是

index.php

文件，我集成了cropperjs以允许用户在上传之前裁剪他们选择的图像。虽然裁剪功能可以使用，但问题是原始的、未裁剪的图像仍在上传到服务器，而不是裁剪后的版本。我怀疑cropperjs没有更新表单中的文件输入，或者来自JavaScript的裁剪后的图像数据没有传递到文件输入，导致上传的是原始图像大小而不是裁剪后的图像。请帮我解决这个问题。

这是我正在使用的网站的链接。

Answer 1

对于典型情况，您不需要重新发明轮子。

让我们看一下“使用 Cropper JS 上传时 PHP 裁剪图像”的示例演示这里。

您可以阅读全文并下载源代码这里。

（即使你想练习，你也可以先阅读这段代码，然后使用它的方法来编写你的代码。）

希望有帮助。