Black screen when select an image from gallery

[cleverappdesign]

Bug Report

Black screen when select an image from gallery to edit

Information

Here's my code, when I tried to get an image from Gallery, it shows black screen. However, if I set allowEdit to false, it works. The image file size was 2MB, there's no black screen when I reduce the file size to 170KB.

takePhoto(sourceType: number, index: number) {
    const options: CameraOptions = {
      quality             :100,
      destinationType     :this.camera.DestinationType.DATA_URL,
      encodingType        :this.camera.EncodingType.JPEG,
      mediaType           :this.camera.MediaType.PICTURE,
      correctOrientation  :true,
      sourceType          :sourceType,
      allowEdit           :true,
      targetWidth         :500,
      targetHeight        :500
    }
    this.camera.getPicture(options).then(
      img => {
        this.photoList[index] = 'data:image/jpeg;base64,' + img
        console.log('Index: ', index)
      },
      err => console.log('Errors: ', err)
    )
  }

Environment, Platform, Device

Happens on iPhone X, iPhon XR

Version information

• Ionic 3
• cordova-plugin-camera: 4.0.3,

Checklist

• [x] I searched for existing GitHub issues
• [x] I updated all Cordova tooling to most recent version
• [x] I included all the necessary information above

[phiasco12]

same issue here...

[breautek]

Can you provide the iOS version(s) you are encountering this issue on?

Thank you.

[phiasco12]

Can you provide the iOS version(s) you are encountering this issue on?

Thank you.

Do you mean the entire app? or just the camera code?

[phiasco12]

here's the code that i am using:

function chooseprofilepic(){

    navigator.camera.getPicture(onSuccess, onFail, {

    quality: 50,
    targetWidth: 500,
    targetHeight: 500,
    correctOrientation: true,
    allowEdit: true,
    //destinationType: Camera.DestinationType.FILE_URI,
    destinationType: Camera.DestinationType.DATA_URL,
    sourceType : Camera.PictureSourceType.SAVEDPHOTOALBUM
    });

    function onSuccess(imageData) {

    fileName=imageData.substr(imageData.lastIndexOf("/")+1 ,imageData.length);

    $('.profilePic').attr('src', "data:image/jpeg;base64,"+imageData+"");

    }

    function onFail(message) {
    // something went wrong
            navigator.notification.alert(
            message,  // message
            alertDismissed,         // callback
            'Alert',// title
            'OK'                  // buttonName
            );  

    }

}

it works fine on iPhone 6s + but it produces a black screen when selecting images from gallery on iPhone XR.

[breautek]

Do you mean the entire app? or just the camera code?

I mean the OS version.

[phiasco12]

Do you mean the entire app? or just the camera code?

I mean the OS version.

ah sorry. long day.

The iOS version is iOS 13.1.2 on iphone 6s+ and iOS 13.0 on iPhone XR.

[phiasco12]

I just updated the OS on the iPhone XR to the latest one which is 13.1.2. same as the OS on the iPhone 6S+.

But i still get the black screen on the iPhone XR.

The plugin works fine on iPhone 6s+. The issue is only with the iPhone XR as it seems.

any ideas?

[cleverappdesign]

Do you mean the entire app? or just the camera code?

I mean the OS version.

Mine is ios 12.4.1 on iPhone XR & iPhone X

[breautek]

Mine is ios 12.4.1 on iPhone XR & iPhone X Thanks for this information. This was to try to determine if it is specific to an iOS 13 change as many issues that is propping lately are... In this case, it appears to be not.

The image file size was 2MB, there's no black screen when I reduce the file size to 170KB.

This, with the combination of using this.camera.DestinationType.DATA_URL leads to believe the black screen you are seeing is caused by the javascript being busy encoding 2 megabytes of binary data (which will result in a very large string, as encoded base64 is about 40% larger than the actual binary data its representing).

See the notice in the docs

NOTE: Photo resolution on newer devices is quite good. Photos selected from the device's gallery are not downscaled to a lower quality, even if a quality parameter is specified. To avoid common memory problems, set Camera.destinationType to FILE_URI rather than DATA_URL.

On modern phones it is a better approach to use a FILE_URI destination instead, then read the file into a blob, which has the capability of creating blob urls without having a base64 encoded image in the javascript memory. Blob urls can be used similar to data urls, such as inside the src attribute of an img tag.

This keeps handling of the binary data outside of the javascript environment, freeing up its only thread and keep the javascript memory space low.

[cleverappdesign]

Mine is ios 12.4.1 on iPhone XR & iPhone X Thanks for this information. This was to try to determine if it is specific to an iOS 13 change as many issues that is propping lately are... In this case, it appears to be not.

The image file size was 2MB, there's no black screen when I reduce the file size to 170KB.

This, with the combination of using this.camera.DestinationType.DATA_URL leads to believe the black screen you are seeing is caused by the javascript being busy encoding 2 megabytes of binary data (which will result in a very large string, as encoded base64 is about 40% larger than the actual binary data its representing).

See the notice in the docs

NOTE: Photo resolution on newer devices is quite good. Photos selected from the device's gallery are not downscaled to a lower quality, even if a quality parameter is specified. To avoid common memory problems, set Camera.destinationType to FILE_URI rather than DATA_URL.

On modern phones it is a better approach to use a FILE_URI destination instead, then read the file into a blob, which has the capability of creating blob urls without having a base64 encoded image in the javascript memory. Blob urls can be used similar to data urls, such as inside the src attribute of an img tag.

This keeps handling of the binary data outside of the javascript environment, freeing up its only thread and keep the javascript memory space low.

Thanks, will try to see if this fixes the issue