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）] =＆＃34; flavor＆＃34;中选择值。我怎样才能做到这一点？

我尝试用[text] =＆＃34;＆＃39; {{flavor}}＆＃39;＆＃34;替换HELLO。但它会抛出编译错误。什么是正确的方法？

Answer 1

我使用[text]="'HELLO'"更新了text={{flavour}}，但确实有效。

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

1 个答案: