5

我将这个简单的代码与 ionic 2 一起使用：

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

然后这是我的打字稿页面：

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";
*/
}

}

拍照后，什么都没有显示。我注意到 Angular 没有更新“src”。我在使用“var image= ... image.src = ...”的注释中测试了部分代码，但它直接操作DOM，我不想要这个。

请问你能看出问题出在哪里吗？

4

4 回答 4

4

尝试使用zone.run()从在 Angular 区域之外执行的任务重新进入 Angular 区域。

这对我来说适用于本地存储的异步任务。

就像是：

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

         console.log("URI of the picture taken is : "+imageURI);
         zone.run(()=>{ this.url = imageURI; })

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

     }, (err) => {
         console.log(JSON.stringify(err));
    }, {});
}
于 2016-01-08T10:44:40.933 回答
1

我终于成功了，这是完整的代码解决方案：

https://github.com/angular/angular/issues/6340#issuecomment-179712658

它需要在要修改的属性周围使用 zone.run() 并将区域变量注入构造函数

你的组件的构造函数应该看起来像

export class PicutrePage {
  constructor(app: IonicApp, nav: NavController, params: NavParams, NgZone zone) {
    this.nav = nav;
    this.thumbnail = 'img/placeholder.png';    
    this.zone = zone;
  }
于 2016-02-04T09:18:07.613 回答
1

您需要对回调函数使用不同的方法，命名为箭头函数表示法：

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);

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

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

请注意我如何替换了function() {}with () => {}，这样thisinthis.url实际上是指组件对象

于 2016-01-07T16:23:40.973 回答
0

我通过添加“？”解决了类似的问题 + 图片 URI 后的随机数（例如 myImage.jpg?74374565346）。执行此操作时，混合应用程序容器（浏览器）会在图片刷新时强制刷新。

此解决方案适用于您正在更改本地文件系统中的图片但使用相同 URI 或文件名的情况。

于 2019-05-01T20:23:09.887 回答