1

我正在使用croppie.js 库以模式裁剪图像并通过ajax 保存在数据库中。

它在输入类型文件时工作。但点击文件类型后不需要它。我有一个带有 src 的 img 标签，当我单击此图像时，相关图像应该是模态的，我可以裁剪图像。

我的 img 标签是：

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

当我单击此图像时，我的croppie 库应该可以工作。

<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>
4

0 回答 0