<ion-card *ngFor="let item of items | async">
<img [src]="'data:image/png;base64,' + item.imageData"/>
<ion-card-content>
<ion-list no-lines>
<ion-list-header>
Text
</ion-list-header>
<ion-item *ngFor="let text of item.results[0].textAnnotations"(click)="itemTapped($event,text.description)">{{text.description}}</ion-item>
</ion-list>
</ion-card-content>
javascript代码:
import {Component} from '@angular/core';
import {AlertController} from 'ionic-angular';
import {Camera,CameraOptions} from '@ionic-native/camera';
import {GoogleCloudVisionServiceProvider} from '../../providers/google-cloud-vision-service ';
import {AngularFireDatabase,FirebaseListObservable} from "angularfire2/database-deprecated";
import {DataProvider} from '../../providers/data/data';
import {IonicPage,NavController,NavParams} from 'ionic-angular';
import {FirstPage} from '../first/first';
import {FormControl} from '@angular/forms';
@Component({
selector: 'page-camera',
templateUrl: 'camera.html'
})
export class CameraPage {
public item: Array < any > ;
items: FirebaseListObservable < any[] > ;
searchTerm: string = '';
searchControl: FormControl;
constructor(
private camera: Camera,
private vision: GoogleCloudVisionServiceProvider,
private db: AngularFireDatabase,
private alert: AlertController,
public dataService: DataProvider,
public navCtrl: NavController, public navParams: NavParams, ) {
this.searchControl = new FormControl();
this.items = db.list('/items');
}
takePhoto() {
const options: CameraOptions = {
quality: 100,
targetHeight: 500,
targetWidth: 500,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.PNG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((imageData) => {
this.vision.getLabels(imageData).subscribe((result) => {
this.saveResults(imageData, result.json().responses);
}, err => {
this.showAlert(err);
});
}, err => {
this.showAlert(err);
});
}
saveResults(imageData, results) {
this.items.push({
imageData: imageData,
results: results
}).set({
imageData: imageData,
results: results
})
.then(_ => {})
.catch(err => {
this.showAlert(err)
});
}
showAlert(message) {
let alert = this.alert.create({
title: 'Error',
subTitle: message,
buttons: ['OK']
});
alert.present();
}
declareItem(): void {
this.item = [{
my_name: 'Kari Ayam',
eng_name: "Curry Chicken",
ch_name: '咖喱鸡',
des: "A whole genre, rather than a distinct dish, you'll find curries of all
sorts on Malaysian tables,
a bowl of rice usually not far away.Malaysian
versions tend to start with a rempah,
a complex paste of spices and
aromatics that 's cooked together and forms the base of the curry; like so
many of the country 's dishes, they tend to make use of coconut milk, too. ",
pic: "https://firebasestorage.googleapis.com/v0/b/testing-
227 d9.appspot.com / o / curry % 20 chicken.jpg ? alt = media & token = e28e63cd - 7906 - 4923 -
b6d8 - 1 c7726d85615 "
}, {
my_name: "Roti Canai",
eng_name: "Roti Canai",
ch_name: "印度煎饼",
des: "A classic Malaysian breakfast of Indian derivation, though this flaky
finger food is good any time of day(and really good at about three in the morning).A dough of flour,
egg,
and ghee(clarified butter) is incredibly,
almost unbelievably elastic;it 's stretched quickly into a tissue-thin
sheet,
like pizza dough but even more dramatic,
then folded back up and
griddled.In its best form,
right off the griddle,
it 's flaky and crisp like
a good croissant on the outside,
soft and steaming and a little bit chewy on
the inside.It 's also served with curry, often lentil dal; other versions
are cooked with egg,
or onion,
or sardines.
",
pic: "https://firebasestorage.googleapis.com/v0/b/testing-
227 d9.appspot.com / o / roti % 20 canai.jpg ? alt = media & token = b852c79f - 6 da6 - 48e1 -
9 b94 - 50512 fa32be9 "
},
{
my_name: "Nasi goreng",
eng_name: "fried rice",
ch_name: "炒饭",
des: "Rice stir-fried with chilis and garlic and kecap manis (sweet soy);
like mee goreng,
it might have chicken or shrimp
for a little more
substance.(I love it with a fried egg over the top.)
",
pic: "https://firebasestorage.googleapis.com/v0/b/testing-
227 d9.appspot.com / o / nasi % 20 goreng.jpg ? alt = media & token = ea257884 - 63 f5 - 4 cd2 -
8 c6d - 4 d1cb4462d91 "
}
];
}
itemTapped($event, text): void {
let val: string = text;
if (val.trim() !== '') {
this.item = this.item.filter((item) => {
return item.my_name.toLowerCase().indexOf(val.toLowerCase()) > -1;
})
this.navCtrl.push(FirstPage, text);
}
}
}
我使用谷歌文本检测,它会将结果存储在firebase中。 [firebase screenshot] [应用截图] 1在检测到单词后,我想传递文本并从我的列表中搜索(this.item()),但是我没有这样做。我的itemTapped函数不是为过滤器部件工作。