Image inside the cropper in a Bootstrap modal not centered and too small

[SiroDiaz]

I am loading a base 64 image from a input file and when i show the modal, the cropper shows wrong (at the top left margin and small) the image and i can't move the cropper area in all the editor.

I have tried with png and jpg images and the same bug. I attach you screenshots

[SiroDiaz]

I have added autoCropArea: 1 and problem is fixed.

[SiroDiaz]

Ok, no. The problem continues. More info about the problem:
I get from FileReader the image, create an image using jQuery, after i assign the base64 result to src of the image and after this i do

var cropper = new Cropper(document.getElementById(imageId), {
    viewMode: 1,
    aspectRatio: 4/3,
    responsive: true,
    guides: false,
    zoomable: false,
    autoCropArea: 1,
    movable: false,
    scalable: false,
    ready: function () {
        var self = this;

        $imageModal.find('#save-image').one('click', function (event) {
            $imageModal.modal('hide');
            var b64Img = self.cropper
                .getCroppedCanvas({ width: 800, height: 600 })
                .toDataURL('image/png');

            if (parseInt(imgId) === 1) {
                fileUploader.featuredImage = b64Img;
                fileUploader.numImagesSelected++;
            } else {
                fileUploader.images.push(b64Img);
                fileUploader.numImagesSelected++;
            }

            $imagePreviewer.parent().removeClass('hidden').prev().addClass('hidden');
            $imagePreviewer.css('background-image', 'url('+ b64Img +')');
        });

    }
});

What is happening?

[fengyuanchen]

Please place your image correctly first before use the cropper on it.

[SiroDiaz]

Ok, thank you for your help. It worked.

[123epsilon]

Please place your image correctly first before use the cropper on it.

What do you mean by this? I think that I am experiencing the same issue, however I don't think I've placed the image 'incorrectly' on the dom. @fengyuanchen @SiroDiaz

[fengyuanchen]

@123epsilon I mean:

1. Append the image into the modal body.
2. Show the modal.
3. Check if the image is displayed in the right size and position (This is the most important step).
4. Apply Cropper.js on the image, then the image will be displayed correctly in the cropper area.

[Akhi1]

I'm trying to load my cropper component to my modal and the image has loaded along with the cropper component except that I cannot set size to the image and it's rather too small to work on it (like in @SiroDiaz 's screenshot)

component.html

<div class="modal-body">
<app-image-cropper src="assets/pic.jpg"></app-image-cropper>
</div>

image-cropper.component.html
<img id="image" #image [src]="imageSource" crossorigin>

I've tried various options but nothing worked.
@fengyuanchen

[Akhi1]

I've finally managed to sort out the issue by adding an if loop around my image component and loaded the image after loading my modal with set timeout.

image-cropper.component.html

<div class="modal-body" style="height: 500px">
     <div *ngIf="show1==true">
        <app-image-cropper src="assets/pic1.jpg"></app-image-cropper>
     </div>
</div>

component.ts

show1 = false;
  show(){
    setInterval(a=>{
      // this.show1 = !this.show1;
      this.show1 = true;
      console.log("value = "+this.show1);
    },500,[]);
  }

[hoolahoop]

I found the answer to this question on this issue:
fengyuanchen/cropper#85