带有画布的 Ionic2 相机图像向该图像添加文本

Question

在我的ionic2应用程序中，我正在尝试将文本添加到从相机捕获的图像中。我对此有一个指示：

@Directive({
 selector: '[draw-text]' 
})
export class ImageDrawTextDirective {
  @Input() text: any;
  @HostListener('load', ['$event.target'])
  onLoad(img) {
    let canvas = document.createElement('canvas');
    let context = canvas.getContext('2d');
    canvas.height = img.height;
    canvas.width = img.width;
    context.drawImage(img, 0, 0);
    context.font = "70px";
    context.textAlign = 'center';
    context.fillStyle = 'black';
    context.fillText(this.text, canvas.width / 2, canvas.height * 0.8);
    img.src = canvas.toDataURL();
  }
}

和我捕获和显示图像的页面：

<ion-item>
    <ion-label>Flaour</ion-label>
    <ion-select [(ngModel)]="flavour">
      <ion-option value="basilikum" selected="true">Basilikum</ion-option>
      <ion-option value="roast">Roast</ion-option>
    </ion-select>
</ion-item>
 <ion-card>
    <ion-card-content>

      <button ion-button (click)="takePicture()">
       <ion-icon name="camera"></ion-icon>
     </button>
     <img [src]="base64Image" *ngIf="base64Image" [text]="'HELLO'" draw-text crossOrigin style="background-repeat:no-repeat; background-position:center center;"/>
   </ion-card-content>

 </ion-card>

这将在捕获的图像上成功打印 HELLO。但是我想从带有 [（ngModel）]="flavor" 的选择中选择值。我怎样才能做到这一点？

我试图用 [text]="{{flavor}}'" 替换 HELLO，但它抛出了编译错误。正确的方法是什么？

Answer 1

我用text={{flavour}}更新了[text]="'HELLO'"，它起作用了。