angularjs - Image not refreshed after taking a photo from a camera -
i using simple code ionic 2 :
<button (click)="takepicture()" >take pic!</button> <img [src]="url || '//:0'">
then typescript page :
import {page} "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 take pic ..."); navigator.camera.getpicture( (imageuri) => { this.url = imageuri; console.log("uri of picture taken : "+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 picture, nothing displayed. noticed "src" not updated angular. tested part of code in comments thats works using "var image= ... image.src=..." directly manipulating dom , don't want this.
please can see problem ?
try use zone.run() reenter angular zone task executed outside of angular zone.
that worked me async tasks local storage.
something like:
public takepicture() { console.log("going take pic ..."); navigator.camera.getpicture((imageuri) => { console.log("uri of picture taken : "+imageuri); zone.run(()=>{ this.url = imageuri; }) //var image = document.getelementbyid('myimage'); //image.src = imageuri; }, (err) => { console.log(json.stringify(err)); }, {}); }
Comments
Post a Comment