Результат Croppie для отправки на веб-сервер - PullRequest
Новая
       15

Результат Croppie для отправки на веб-сервер

0 голосов
/ 01 декабря 2018

Может кто-нибудь помочь мне с этим?Я не настолько разбираюсь в JavaScript, и я перечитывал документацию снова и снова, а также просмотрел столько постов здесь, как и погуглил проблему.Я не могу получить свой обрезанный результат и отправить его на мой веб-сервер.Вот мой код.

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>

1 Ответ

0 голосов
/ 01 декабря 2018

Я провел дополнительное исследование и нашел решение с помощью 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

...