Error loading image from Capacitor Camera

Capacitor
1

When trying to grab a photo from my iOS simulator camera roll, I am getting this error:

Error: Uncaught (in promise): Error: Error loading image

This is my code to grab the photos:


//Import the plugins
import { Camera, CameraSource, CameraResultType } from '@capacitor/camera';

//Allow the user to select where the image will originate from
async selectImageSource(location: string) {
    const actionSheet = await this.actionSheetController.create({
      header: "Select Image Location",
      buttons: [
        {
          text: 'Load from Library',
          handler: () => {
            this.choosePicture(CameraSource.Photos, location);
          }
        },
        {
          text: 'Use Camera',
          handler: () => {
            this.choosePicture(CameraSource.Camera, location);
          }
        },
        {
          text: 'Cancel',
          role: 'cancel'
        }
      ]
    });
    await actionSheet.present();
  }

//Get the photo from the source location
async choosePicture(source: CameraSource, location: string) {
    // Take a photo
    const capturedPhoto = await Camera.getPhoto({
      resultType: CameraResultType.Uri,
      source: source,
      allowEditing: true,
      quality: 75
    });

    console.log(capturedPhoto); //Nothing is logged.
  }

Any thoughts on what may be cause the error? Additionally, with the capacitor plugin, are iOS users required to provide permission for each photo they would want to use from their Camera Roll?

EDIT:

Here are my apps dependecies:

"dependencies": {
    "@angular/common": "~12.0.1",
    "@angular/core": "~12.0.1",
    "@angular/forms": "~12.0.1",
    "@angular/platform-browser": "~12.0.1",
    "@angular/platform-browser-dynamic": "~12.0.1",
    "@angular/router": "~12.0.1",
    "@capacitor/app": "1.0.2",
    "@capacitor/camera": "^1.0.3",
    "@capacitor/core": "^3.1.2",
    "@capacitor/haptics": "1.0.2",
    "@capacitor/ios": "3.1.1",
    "@capacitor/keyboard": "1.0.2",
    "@capacitor/splash-screen": "^1.0.2",
    "@capacitor/status-bar": "^1.0.2",
    "@capacitor/storage": "^1.0.3",
    "@ionic-native/core": "^5.34.0",
    "@ionic-native/onesignal": "^5.34.0",
    "@ionic-native/social-sharing": "^5.34.0",
    "@ionic/angular": "^5.5.2",
    "cordova-plugin-x-socialsharing": "^6.0.3",
    "es6-promise-plugin": "^4.2.2",
    "onesignal-cordova-plugin": "^2.11.4",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
1 Like
2

So this goes back a ways, but I have just run into this issue with Capacitor 4’s camera plugin, using pickImages() (rather than getPhoto()) for getting 1 or more images from the camera-roll, with the same error message:

Error: Error loading image

I did NOT have the problem with iOS 13.7 simulators (like iPhone 11), but I did have the problem with iOS 15.5 simulators (iPhone 13 Pro Max) which should also allow picking more than one image. Then I tested on an iPhone with iOS 16 and it worked - It seems to me that the camera roll / photo gallery is not supported on simulators (much like snapping a photo isn’t supported), but it works on actual devices.

I decided to go with a solution like this to just pop up an error to the user if it is on a simulator:

  async fromPhotos() {
    await Camera.requestPermissions();

    // AVOID THIS:
    // const result:GalleryPhotos = await Camera.pickImages({

    // DO THIS INSTEAD:
    let result:GalleryPhotos = null;
    try {
      result = await Camera.pickImages({
        limit: this.multi 0,
        quality: 90,
      });
    } catch(err) {
      console.error('pickImages ERROR:', result, err);
      this.imageUploadModal.dismiss();   // I use a modal with 3 options: Camera, Photos, or the capacitor-file-picker plugin

      // as long as the user did not cancel the camera roll, show an error and exit early:
      if(!err.errorMessage?.includes('User cancelled')) {
        this.toastService.showFailureToast(`Cannot access photos: ${err}`);
      }
      return;
    }

    const photos = result.photos.map( (res: GalleryPhoto) => // handle resulting images....
    .
    .
    .
  }
3

There is a known bug in the iOS simulators, where an error will occur if you try to select a specific image (1st in gallery, with red flowers). If you avoid including that image in your selection everything should work as expected.

4

That’s weird bug, but I definitely wasn’t uploading “the red flowers” image.
This problem is related to any/all image selections from the iPhone camera-roll on a Simulator

5

Using the following code on the iPhone 13 Pro Max (iOS 15.5) simulator, I was able to successfully select multiple images:

pickPhotos = async () => {
  try {
    const result = await Camera.pickImages({
      limit: 3,
      quality: 90,
    });
    console.log(result.photos);
  } catch(e) {
    console.error('pickImages ERROR:', e);
  }
}

I’ve attached a screencast demonstrating the image with the known bug, as well as multiple image picking working as intended:
iOS Photo Picker

6

Hi Jameson, it’s a little unclear to me what is going on here - on the one hand, I can see you selecting 2 files without the error, but why are you bringing attention to the error when you only select 1.
also, there’s a copy-and-paste error in my example above - it should show:

        limit:  0,

which is documented as unlimited.
Either way, even setting limit to 3, I’m still getting the error with 1, 2, or any number of files.
I just confirmed that I’m using @capacitor/camera@4.1.4

7

I selected that single file because as I mentioned earlier, it’s the “red flowers” image with a known bug in the simulators. If your selection of files includes this image it will always error. But if you exclude it from your selection, picking any of the other images will work fine (as demonstrated).

FWIW I don’t think version 1.4.1 is valid, since there was never a release with that number. My example was a Capacitor v4 application, and as such would be using the 4.x release of the plugins.

8

Whoops and whoops - I meant capacitor/camera@4.1.4. I also see the point about red flowers now (aka, known error).

That said, I can guarantee I’m not selecting red-flower image, and I’m still getting the error instead of an Array of photo Objects like you are.