0

在我的 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)]="flavour" 从选择中选择值。我怎样才能做到这一点？

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

4

1 回答 1

2

我更新[text]="'HELLO'"了text={{flavour}}它并且它有效。

于 2017-01-22T12:01:17.257 回答