Safari is not showing image

[murilobd]

Hi, I don't know why, but on Safari image is not being displayed on canvas! How could I debug this to see if I can fix this issue?

[oschebesta]

Hey, I am having the same issue. Are there any Solutions?

[jcbowyer]

Yes i am having the same issue on mobile devices. If I set a regular image src it appears but if I set the cropper image property it is blank.

I was able to get this to work by using the default file upload selection. The code that failed using my one file input on safari (it worked randomly) is below.

HTML <input accept="image/*" [multiple]="false" (change)="selectEventHandler($event)" type="file">

Type Script

`  selectEventHandler(e: any): void {
    e.files = e.target.files;

    let loading = this.loadingCtrl.create({
      content: '',
      showBackdrop: false
    });

    loading.present();

    if (e.target.files && e.target.files[0]) {

      loading.setContent('loading' );
      let reader = new FileReader();

      reader.onload = (ev: any) => {
        loading.dismiss();
        this.onloadcallback(ev);
      };
      reader.onerror = (err: any) => {
        loading.dismiss();
        this.utilityService.handleErrorUI(this.toastCtrl, err);
      }

      reader.readAsDataURL(e.target.files[0])
    };
  }

  onloadcallback(ev) {
    this.editingImage = true;
    let image: any = new Image();
    image.src = ev.target.result;
    this.selectedImg = ev.target.result;
    this.ImageCropper.setImage(image);
  }`