Ionic2图像叠加

我需要一些Ionic2应用程序中图像覆盖的指南/说明/代码示例

我正在使用本机相机拍摄图像，然后我想通过添加以下文字编辑拍摄的图像（这是来自Instaweather应用程序）：

编辑后，我想在whatsapp等社交媒体上分享这张照片（现在我可以不经编辑就分享拍摄的照片，这很简单）

我有如下指示，但没有多大帮助

import { Directive, HostListener, Input} from '@angular/core';

@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 = "50px Arial";
    context.textAlign = 'center';
    context.fillStyle = 'white';
    context.fillText(this.text, canvas.width / 2, canvas.height * 0.8);

    img.src = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
  }
} 

我使用的方法如下：

 <!-- Display the captured image with text on it -->
 <img [src]="base64Image" *ngIf="base64Image" text="{{flavour}}" draw-text crossOrigin />