Реализация JQuery Cropper

Question

У меня есть аватар, при нажатии которого открывается модель, содержащая зону сброса, для выбора нового изображения, кнопки сохранения, области предварительного просмотра и кнопки редактирования. Далее при нажатии на кнопку редактирования открывается новая модель, в которой я пытаюсь реализовать jQuery cropper. Я не могу инициализировать обрезку.

Проект в угловом формате и узел

1-й модальный HTML:

  <div class="modal fade" id="PhotoUploadModal" role="dialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="m-n">Profile Picture
            <span class="pull-right mt-xs">
                <button type="button" class="close" data-dismiss="modal" (click)="resetModal()">&times;</button>
            </span>
          </h3>
        </div>

        <!-- Profile Picture Modal -->
        <div class="modal-body">
          <div class="row">
            <div class="center">
              <div class="row">
                <div class="col-md-6">
                  <!-- Dropzone -->
                  <form title="Select Photo" class=" col-xs-12 p-n cursorPointer" style="border: none !important; height: 0px;" id="inline-photo" method="post" enctype="multipart/form-data">
                    <div class="dz-message btn skap-avatar-upload col-xs-12 mb-xxl" style="height: 40px; padding-top: 11px;" data-dz-message>
                      <span class="ti ti-upload"></span>
                      &nbsp;
                      <span class="cursorPointer" style="height: 22px; padding-top: 3px;">Choose Image</span>
                    </div>
                  </form>
                </div>
                <div class="col-md-6">
                  <span title="Save Image"  id="saveProfileImage" class="btn skap-avatar-upload col-xs-12 mb-xxl" style="height: 40px; padding-top: 11px;" (click)="saveProfilePhoto()">
                    <div align="center">
                      <span class="ti ti-save"></span>
                      &nbsp;
                      <span class="cursorPointer" style="height: 22px; padding-top: 3px;">Save</span>
                    </div>
                  </span>
                </div>
              </div>
              <div style="margin-bottom: 20px; height: 194px;" class="panel-body dropzone-previews well p-n pt mb-n">               <!-- Dropzone Preview -->

              </div>
            </div>
          </div>

          <div class=row>
            <div class=col-md-12>
              <button type="button" class="btn btn-default btn-rounded" style="background: lightseagreen !important; color: white !important; font-size: 18px;" data-method="getCroppedCanvas" data-option="{ &quot;maxWidth&quot;: 4096, &quot;maxHeight&quot;: 4096 }">
                <span class="docs-tooltip" title="Crop & Rotate" data-toggle="modal" data target="#getCroppedCanvasModal">Crop/Rotate
                </span>
               </button>
            </div>
          </div>

          <div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1" style="z-index: 9999;">
            <div class="modal-dialog">
               <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="getCroppedCanvasTitle">Edit Image Canvas</h5>
                       <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-top: -25px;">
                          <span aria-hidden="true">&times;</span>
                       </button>
                  </div>
                  <div class="modal-body">
                      <div style="border: 1px solid black; height: 300px; width: 100%; border-radius: 5px;">
                      <!-- Expecting Dropzone Image Here to edit -->
                          <div class="container">
                             <div class="row">
                                <div class="col-md-12">
                                    <div class="img-container">
                                      <img id="image" src="https://cdn.pixabay.com/photo/2015/11/16/16/28/bird-1045954_960_720.jpg" alt="Picture" style="margin-left: -52%; margin-top: 5px; height: 290px;">
                                    </div>
                                </div>
                             </div>
                          </div>
                      </div>

                   </div>
                 </div>
              </div>
           </div>

После этого есть несколько кнопок для управления правками. ,Вместо раздела id = image я хочу, чтобы изображение dropzone было отредактировано.

Пожалуйста, помогите, как это сделать.