High Resolution Picture Problem

Ionic Native
1

Hello, I am using https://ionicframework.com/docs/native/camera/ this plugin. When I test iphone 7 plus back camera, app started to frozen. Do you have an idea ? ( NOTE: I am using base64 string )

UPDATE:

I delete img element from html. Now when I select photo doesn’t froze but how can I display image. ( Just larger image getting froze)

 <img style="width:100%;height:250px;border-radius:5px" [src]="_DomSanitizer.bypassSecurityTrustUrl(base64Image)" *ngIf="base64Image" />
2

It does work in other configurations?

What is your ionic info output?

3

I delete img element from html. Now when I select photo doesn’t froze but how can I display image

 <img style="width:100%;height:250px;border-radius:5px" [src]="_DomSanitizer.bypassSecurityTrustUrl(base64Image)" *ngIf="base64Image" />

Here is my ionic info
@ionic/cli-utils : 1.9.2
ionic (Ionic CLI) : 3.9.2

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 2.1.3
Cordova Platforms  : android 6.2.3 ios 4.4.0
Ionic Framework    : ionic-angular 3.6.0

System:

ios-deploy : 1.9.1 
Node       : v6.11.0
npm        : 5.3.0 
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b
4

If base64 images are the issue, it might be a memory problem (guess). Anyhow, what I do in my app is to take a picture from the camera, use cordova.file to move it to my cordova.file.dataDirectory+custom path directory and display images in the template directly from that path. Note however, that I’ve used base64 in the past, and I’ve not faced issue with a few images (I use iPhone 7 too). I typically don’t like this approach for many images, which is why I don’t use it for image heavy apps.

Also make sure your CSP is set correctly - this typically doesn’t result in freezing, but might result in not displaying. img-src 'self' data:;

5

That looks recent enough.

I hope someone else can help you with your actual problem, I have no experience there.

(Have you tried to restart the device? Does it also happen on other devices or only on this one?)

6

Thanks for respond, I check this. But nothing change

Thanks for respond. I tried another device but I get error just higher quality images. Even iphone front camera doesn’t to cause froze.

7

Do you have a simple app I can try to test this - maybe a GitHub repo? I can write a small one myself, but its easier if you have a reduced use case app I can clone - if so I’ll give it a shot - it may even be an issue with DomSanitizer.

1 Like
8

Hello My internet connection is very bad , So I create small app for you.

1-) Create empty project
2-) https://ionicframework.com/docs/native/camera/ install this add app components

You can test by using input.

— First don’t shoot a photo and write someting inside input
— And After shooting a photo test it again.

Thank you for helping.

home page html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content style="background-color:#ddd" padding>
  <img style="width:100%;height:250px;border-radius:5px" [src]="_DomSanitizer.bypassSecurityTrustUrl(base64Image)" *ngIf="base64Image" />

  <button (click)="addPhoto()" ion-button block icon-start>Shoot Photo</button>
  <ion-input style="background-color:#fff" type="text" ></ion-input>

</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
import {DomSanitizer} from '@angular/platform-browser';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  private base64Image:string;

  constructor(public navCtrl: NavController,private camera: Camera,public _DomSanitizer: DomSanitizer) {

  }

  addPhoto(){
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.PNG,
      mediaType: this.camera.MediaType.PICTURE,
      sourceType: 1
    }

    this.camera.getPicture(options).then((imageData) => {

      this.base64Image = 'data:image/jpeg;base64,' + imageData;

    }, (err) => {
      console.log(err);
    });
  }

}
9

Here you go - tested on iPhone 7.

Notes:

  1. You don’t need to DomSanitize the base64 image (I think its only needed if you are creating HTML dynamically, not sure)
  2. I’ve allowed you to keep taking photos - so you can figure out when (and if) you run out of memory
  3. These are all full sized images (I am just displaying it as a card thumbnail, you can increase the size to validate)
  4. JPEG is faster than PNG in my tests
  5. You can also insert a dummy image (to test on a browser)

My ionic info:

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.0

System:

    Android SDK Tools : 25.2.5
    ios-deploy        : 1.9.0 
    ios-sim           : 5.0.2 
    Node              : v6.11.2
    npm               : 5.3.0 
    OS                : macOS Sierra
    Xcode             : Xcode 8.3.3 Build version 8E3004b
2 Likes
10

Hello again, thanks for taking the time. If I delete _DomSanitizer , I get this error
[13:29:13] console.log: WARNING: sanitizing unsafe URL value

And You are right problem was _DomSanitizer and I try to make in ts file. Not in HTML thats works fine now. Thanks for every response.

html

  <ion-col col-6 col-md-6 col-lg-4 col-xl-3>
            <ion-card>
              <img [src]="trustedImage" />
            </ion-card>
      </ion-col>

ts file

addPhoto(){
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      sourceType: 1
    }

    this.camera.getPicture(options).then((imageData) => {

      this.base64Image = 'data:image/jpeg;base64,' + imageData;
      this.trustedImage = this._DomSanitizer.bypassSecurityTrustUrl(this.base64Image);
    }, (err) => {
      console.log(err);
    });
  }
1 Like