Image not refreshed after taking a photo from a camera

[zamrokk]

I am using this simple code with ionic 2 :

 <button (click)="takePicture()" >Take a pic!</button>
 <img [src]="url || '//:0'">

Then this is my Typescript page :

 import {Page} from "ionic-framework/ionic";

 @Page({
templateUrl: 'build/pages/smartscan/smartScan.html'
 }
 )

 export class SmartScan {

 public url:string;

 constructor() {
console.log("Starting SmartScan page ...");
 }

 public takePicture() {
console.log("Going to take a pic ...");
navigator.camera.getPicture( (imageURI) => {

    this.url = imageURI;

    console.log("URI of the picture taken is : "+this.url);

    console.log(JSON.stringify(this));

    //var image = document.getElementById('myImage');
    //image.src = imageURI;

}, function (err) {
    console.log(JSON.stringify(err));
}, {});

 /* this.url = "http://maison-cresci.fr/uploads/images/nice_cresci_slide_environnement_003.jpg";
*/
  }

 }

After taking the picture, nothing is displayed. I noticed that the "src" is not updated by Angular. I tested a part of the code in comments thats works using "var image= ... image.src=..." but is directly manipulating the DOM and I don't want this.
Also, any code outside the async call camera block makes Angular to update the view, but any code inside the async call updates the view.

Please can you see where the problem is ?

[zoechi]

See also http://stackoverflow.com/questions/34660141/image-not-refreshed-after-taking-a-photo-from-a-camera

[zamrokk]

yes this is my own post but unfortunately no solution has been provided ...

[trakhimenok]

@zamrokk try to uze zone.run() - http://stackoverflow.com/a/34675090/1975086

https://angular.io/docs/js/latest/api/core/NgZone-class.html#!#run

[CaptainCodeman]

is zone.run() the new $scope.$apply() / digest trigger ?

[zamrokk]

i tried zone.run() on the line this.url = imageURI; => nothing
i tried also around the call to the async call => nothing

what is funny is when i click again on the button to take the photo, i see that the page is refreshed behind just before the camera is launched, and i see my photo ( without using zone.run() ) ....

is there a workaround to ask Angular to refresh the view ? zone.run() does not seem to work

[trakhimenok]

@zamrokk, try to update just a simple text - for example put in template as test: {{imageUrl}} and see if zone.run(()={this.imageUrl=value;} is updated. It should. If yes, the issue with the element.

[zhouhao27]

zone.run doesn't fix the problem for me. Here is my code (in ionic 2 project):

export class PicutrePage {
  constructor(app: IonicApp, nav: NavController, params: NavParams) {
    this.nav = nav;
    this.thumbnail = 'img/placeholder.png';    
  }

 imagePick() {
    var options = {
        quality : 75,
        destinationType : Camera.DestinationType.FILE_URL,
        sourceType : Camera.PictureSourceType.PHOTOLIBRARY,
        allowEdit : true,
        encodingType: Camera.EncodingType.JPEG,
        popoverOptions: CameraPopoverOptions,
        saveToPhotoAlbum: false
      };

      navigator.camera.getPicture((imageUrl)=>{
        //console.log(imageUrl);        
        zone.run(()=>{this.thumbnail = imageUrl;});        
      }, (error)=>{
        alert('Failed because: ' + message);  
      }, options);
}

html:

<ion-content>
  <ion-card>
    <ion-item>
      <ion-item-content>
        <button fab fab-top fab-right style="right:80px;" (click)='imagePick()'>
          <ion-icon ios="ios-image" md="md-image">
          </ion-icon>
        </button>
        <img [src]='thumbnail' alt="">

I tried Camera.DestinationType.FILE_URL too. I'm sure the image is updated because when I scroll the page (maybe cause refresh the DOM) will make the image appeared.

[zhouhao27]

Even when I try a text update inside the getPicture callback, it also not updated. It could because of a multi-threading issue?

[zhouhao27]

@zamrokk You find a solution already? I tried whatever I could but still in vain.

[zamrokk]

No the issue still remains. I use actually my workaround waiting for a fix
from angular team
Le 4 févr. 2016 02:22, "Zhou Hao" notifications@github.com a écrit :

@zamrokk https://github.com/zamrokk You find a solution already?

—
Reply to this email directly or view it on GitHub
#6340 (comment).

[zhouhao27]

What is your workaround? @zamrokk

[zoechi]

@zhouhao27 where do you get zone from?

the constructor of your component should look like

export class PicutrePage {
  constructor(app: IonicApp, nav: NavController, params: NavParams, NgZone zone) {
    this.nav = nav;
    this.thumbnail = 'img/placeholder.png';    
    this.zone = zone;
  }

[zhouhao27]

ok, then you wrap your call inside zone.run() like this?

this.zone.run(()=>{this.thumbnail = imageUrl;});  

I just use zone.run without passing by constructor.

[zhouhao27]

Yes. Your workaround works. But only for DATA_URL, the FILE_URL won't work. Maybe [src] doesn't recognise the local device path? Thanks @zamrokk

[zamrokk]

ok i made it worked, here below my full code :

export class SmartScan {

    private platform:Platform;
    private nav:NavController;
    private zone:NgZone;

    public attachment:Attachment;


    constructor(platform: Platform, nav: NavController,zone :NgZone) {
        this.nav = nav;
        this.platform = platform;
        this.zone=zone;
        console.log("Starting SmartScan page ...");
    }

    public takePicture() {
        console.log("Going to take a pic ...");

        if(navigator.camera) { //camera exists

            console.log(JSON.stringify(navigator));

          // var a = zone.run(()=>{

               navigator.camera.getPicture((imageURI) => {

                   //this.attachment = new Attachment(1, imageURI);

                   this.zone.run(()=>{this.attachment = new Attachment(1, imageURI);});

                console.log("URI of the picture taken is : " + this.attachment.url);

                //FIXME bug angular 2 here not updating the view
                //document.getElementById('myImage').src = imageURI;

            }, function (err) {
                console.log(JSON.stringify(err));
            }, {});

            //});
            //console.log(JSON.stringify(a));

        }else{
            //dummy pic
            this.attachment = new Attachment(1, "http://maison-cresci.fr/uploads/images/nice_cresci_slide_environnement_003.jpg");
        }

    }
...

[zhouhao27]

@zamrokk Sorry what's your html? What is the Attachment? And how it's related to your html img element?

Mine is:

<img [src]='thumbnail' alt="">

If I passed the url by using FILE_URL, it won't work. But it works if I use DATA_URL now.

[zamrokk]

export class Attachment{
    constructor(public id:number,
                public url:string){
    }
}


<ion-navbar *navbar>
    <ion-title>SmartScan</ion-title>
</ion-navbar>
<ion-content>
    <button (click)="takePicture()" >Take a pic!</button>
    <img id="myImage" [src]="attachment?.url || '//:0'">
    test: {{attachment?.url}}
    <button *ngIf="attachment" block (click)="openTrips()" class="android-attr">
        Assign as new expense to a trip
    </button>
    <button *ngIf="attachment" block (click)="openExpenses()" class="android-attr">
        Assign to an existing expense
    </button>
</ion-content>

[zhouhao27]

Basically it's the same like what I do. You only wrapped the url into an object. My returned url is:

file:///Users/username/Library/Developer/CoreSimulator/Devices/81B513B7-AE34-4911-A9C9-57E293957BEC/data/Containers/Data/Application/949E5AB0-92A6-480E-9816-34F78751E865/tmp/cdv_photo_012.jpg

Don't know why it's not shown.

[zhouhao27]

Maybe I'll try on android to see if there is any difference. Thanks

[zamrokk]

your are welcome

[rohan2934]

Hiii.... need a help.
i want to get the image name, type properties (event object) of clicked image.

Camera.getPicture({
quality : 75,
destinationType : Camera.DestinationType.NATIVE_URI,
sourceType : Camera.PictureSourceType.CAMERA,
//encodingType: Camera.EncodingType.JPEG,
saveToPhotoAlbum: true,
}).then(imageData => {
this.base64Image = "data:image/jpeg;base64," + imageData;
}, error => {
console.log("ERROR -> " + JSON.stringify(error));
});

[rohan2934]

Hiii.... need a help.
i want to get the image name, type properties (event object) of clicked image.

Camera.getPicture({
quality : 75,
destinationType : Camera.DestinationType.NATIVE_URI,
sourceType : Camera.PictureSourceType.CAMERA,
//encodingType: Camera.EncodingType.JPEG,
saveToPhotoAlbum: true,
}).then(imageData => {
this.base64Image = "data:image/jpeg;base64," + imageData;
}, error => {
console.log("ERROR -> " + JSON.stringify(error));
});

[mconti80]

I had a similar problem. I was taking a picture and saving it on my app cache replacing the old. Then the filename was the same and even trying swapping the content of the variable containing the file name was not working. I don't know why but I was feeling the problem was related with some sort of caching of the browser running the hybrid app.

I finally make it working by adding a '?' and a random number string at the end of my file name (e.g. myImage.jpg?09475637929). By changing the random number the browser was forced to refresh the image thus the content.

Note: the ngZone solution was not working for me, and my solution doesn't rely on any ngZone.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}