показ изображений в модальном виде через библиотеку cropp ie. js - PullRequest
Новая
       34

показ изображений в модальном виде через библиотеку cropp ie. js

0 голосов
/ 14 апреля 2020

Я использую библиотеку cropp ie. js для обрезки изображения в модальном режиме и сохранения с помощью ajax в базе данных.

Работает при вводе файла типа. Но не нужно это после нажатия на тип файла. У меня есть тег img с sr c, и когда я нажимаю на это изображение, связанное изображение должно быть модальным, и я могу обрезать изображение.

Мой тег img: 

<img src="pic1.jpg" id="profilenewpic" width="auto" height="140px" />

Когда я нажимаю на это изображение, моя библиотека cropp ie должна работать. 

<script type="text/javascript">
            // start profile crop
        $(document).ready(function(){

            $image_crop = $('#image_demo').croppie({
            enableExif: true,
            viewport: {
              width:230,
              height:230,
              type:'square' //circle
            },
            boundary:{
              width:300,
              height:300
            }
          });

          $('#profilenewpic').on('click', function(){
            var reader = new FileReader();
            reader.onload = function (event) {
              $image_crop.croppie('bind', {
                url: event.target.result
              }).then(function(){
                console.log(event.target.result);
              });
            }
            reader.readAsDataURL(this.files[0]);
            $('#uploadimageModal').modal('show');
          });

          $('.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');
                  $('#profile_id').hide();                     
                  $('#show_image').attr('src', data);                      
                  $('#show_image').show(); 
                }
              });
            })
          });
          });
        // end profile crop
    </script>

Мой модал: 

<div id="uploadimageModal" class="modal" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-8 text-center">
                                      <div id="image_demo" style="width:350px; margin-top:30px"></div>
                                </div>
                                <div class="col-md-4" style="padding-top:30px;">
                                    <br />
                                    <br />
                                    <br/>
                                      <button class="btn btn-success crop_image">Crop & Upload Image</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
...