Question

有人可以帮我吗？我不是很精通JavaScript，而且已经读过一遍又一遍的文档，并且在这里查看了许多帖子，并用Google搜索了这个问题。我无法获得裁剪的结果并将其发送到Web服务器。这是我的代码。

HTML：

<form action="" method="post" enctype="multipart/form-data" id="formTest">
          <div id="modal">
            <div id="main-cropper"></div>
            <a class="button actionUpload">
              <span>Upload</span>
              <input type="file" id="upload" value="Choose Image" 
                    accept="image/*" name="imgf">
            </a>
            <button class="actionDone">Done</button>
            <button class="actionCancel">Cancel</button>
          </div>
      </form>

JS：

<script>

var basic = $('#main-cropper').croppie({
    viewport: { width: 300, height: 400, type: 'square' },
    boundary: { width: 700, height: 500 },
    showZoomer: true
});

function readFile(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      $('#main-cropper').croppie('bind', {
        url: e.target.result
      });
      $('.actionDone').toggle();
      $('.actionUpload').toggle();
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$('.actionUpload input').on('change', function () { readFile(this); });
$('.actionDone').on('click', function(){


    $('#main-cropper').croppie('result', {
        type: 'canvas',
        size: 'viewport'
    }).then(function (resp) {
        $('#formTest').find('name=["imgf"]').val('src', resp);
    });

  $('.actionDone').toggle();
  $('.actionUpload').toggle();
});

</script>

Answer 1

我做了一些其他研究，并通过使用AJAX找到了解决方案。我试过了，它有效。需要对CSS进行一些清理，但这没什么大不了的。这是一些修改后的代码：

部分JavaScript：

$('.crop_image').click(function(event){
    image_crop.croppie('result', {
      type: 'canvas',
      size: 'viewport'
    }).then(function(response){
      $.ajax({
        url:"upload.php",
        type: "POST",
        data:{"image": response},
        success:function(data)
        {
          $('#uploadimageModal').modal('hide');
          $('#uploaded_image').html(data);
        }
      });
    })
  });

AJAX：

if(isset($_POST["image"]))
{
    $data = $_POST["image"];

    $image_array_1 = explode(";", $data);

    $image_array_2 = explode(",", $image_array_1[1]);

    $data = base64_decode($image_array_2[1]);

    $imageName = time() . '.png';

    file_put_contents("pg/$imageName", $data);

        echo '<img src="'.$imageName.'" class="img-thumbnail" />';

}

https://www.webslesson.info/2018/03/image-crop-and-upload-using-jquery-with-php-ajax.html

Croppie结果发送到Web服务器

1 个答案: