Question

在我的Angular2应用程序中，我需要加载图像，对其进行一些处理（例如，尝试通过OCR找出图像中包含的内容）并显示我在页面上找到的结果。图像处理（例如OCR）由我的app外部的javascript库完成。整个过程适用于Chrome和Firefox（在Mac和Windows上），但在Safari中不起作用。具体来说，最后一步（即通过绑定刷新页面）显然不会在Safari中被踢。

这是一个Plnkr，它重现了我在我的应用程序中见证的行为。

https://plnkr.co/edit/BDoBkD5qo94LLeKSpyEz

以下是代码的核心部分，它重现了我正在目睹的行为

import {Component} from 'angular2/core';

import {ResultContainer} from './resultContainer';

@Component({
    selector: 'top-cmp',
    providers: [],
    template: `
        <h4> Please choose an image file (e.g. a *.jpg file) using the following input element.</h4>
        <div>
            <input id="selectFile" type="file" (change)="fileSelected($event)">
        </div>
        <p>After you have chosen a file I expect to see <br>
        the following number change from 0 to 1. <br>
        This actually happens in Chrome and Firefox but not in Safari</p>
        <h2>{{resultContainer.result}}</h2>
    `,
    styleUrls: [],
    inputs: [],
    directives: [],
})
export class TopComponent {
    public resultContainer = new ResultContainer();

    constructor() {
      // here I set the value that I see opening the page
        this.resultContainer.result = 0;
    }

    // this is the method called when a file is selected
    fileSelected(inEvent) {
        let imgUrl = URL.createObjectURL(inEvent.target.files[0]);
        var _sourceImage: any;
        _sourceImage = new Image();
        // here I set the callback that needs to be called after
        // image processing is finished to update the page
        _sourceImage.digitsCallback = this.showResultCallback;
        _sourceImage.onload = doSomeImageProcessing;
        _sourceImage.src = imgUrl;
    }

    // this is the callback that needs to be called to update the page
    public showResultCallback= (inDigits: any[]) => {
        console.log('result --- ' + inDigits[0]);
        this.resultContainer.result = inDigits[0];
    }
}

function doSomeImageProcessing() {
    var digits = new Array<number>();
    digits.push(1);
    this.digitsCallback(digits);
}

export class ResultContainer {
    public result: number;
}

提前感谢任何寻求帮助的人。

Angular2 - 绑定到刷新页面在Safari中可用，但在Chrome / Firefox中可以使用

0 个答案: