Невозможно установить обрезанное изображение в поле ввода как файл - PullRequest
Новая
       21

Невозможно установить обрезанное изображение в поле ввода как файл

0 голосов
/ 19 января 2019

В своем приложении я использовал croppie, чтобы обрезать изображение, затем просмотреть и загрузить это обрезанное изображение. Я уже обрезал изображение в качестве предварительного просмотра, но не могу установить это обрезанное значение в поле ввода. 

<div class="modal fade" id="myModal" role="dialog" style="margin-top: 70px;">
<div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Upload Profile Picture</h4>
    </div>
    <form method="POST" action="picuploaddb.php"   enctype="multipart/form-data">
        <div class="modal-body">
            <input type="hidden" name="teacherid" value="<?php echo $myteacherid;?>">
            <input type="file" class="form-control" id="upload_image" name="profile_pic"> <!-- add id-->
            <input type="file" style="display:none" class="form-control" id="upload_preview" name="profile_picpreview"> 
            <img class='img-circle' id="preview" name="profile_preview"/>

        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-success upload">Upload</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </form>
  </div>

</div>

В этом модале я использовал для выбора файла и после предварительного просмотра кадрирования и загрузки из этого мода. Я не могу установить обрезанное изображение во втором поле ввода. 

$(document).ready(function(){
        $image_crop = $('#image_demo').croppie({
        enableExif: true,
        viewport: {
          width:220,
          height:250,
          type:'circle' //circle
        },
        boundary:{
          width:300,
          height:300
        }
        });
        $('#upload_image').on('change', function(){
            var reader = new FileReader();
            reader.onload = function (event) {
              $image_crop.croppie('bind', {
                url: event.target.result
              }).then(function(){
                console.log('jQuery bind complete');
              });
            }
            reader.readAsDataURL(this.files[0]);
            $('#uploadimageModal').modal('show');
        });
        $('.crop_image').click(function(event){
            $image_crop.croppie('result', {
                type: 'canvas',
                size: 'viewport'
            }).then(function(resp){
                $('#uploadimageModal').modal('hide');

                $('#upload_image').hide();

                $('#preview').attr('src',resp);

                $('#upload_preview').attr('name',resp);

                $('#upload_preview').show();//i want cropped image inside it
            });
        });
    });

это мой кроппи Я хочу установить обрезанное изображение в поле ввода upload_preview. Пожалуйста, помогите мне. Спасибо.

...