Angular ionic2摄像头图像在模板中不显示整个图像

我正在尝试在ionic2应用程序中使用摄像头。我用以下功能拍照：

takePicture(){
    Camera.getPicture({
        sourceType: Camera.PictureSourceType.CAMERA,
        destinationType: Camera.DestinationType.FILE_URI,
        quality: 100,
        targetWidth: 1000,
        targetHeight: 1000,
        correctOrientation: true
    }).then((imageData) => {
      // imageData is a base64 encoded string
        this.base64Image = imageData;
    }, (err) => {
        console.log(err);
    });
  }

并使用以下HTML显示：

<img [src]="base64Image" *ngIf="base64Image" text="{{flavour}}" draw-text crossOrigin style="max-width: : 100%; max-height: 100%;" />

然而，它并没有显示完整的图像，我从相机在html。 以下是截图： 和原始图像：

为什么会有这种差异？如何显示我拍摄的完整图像

---

注意：我尝试更改targetWidth值，但没有帮助

这是因为我使用的指令将文本作为覆盖添加到捕获的图像中

---

我删除了

text=“{flavor}}”绘制文本

，我可以看到整个图像。

这是因为我使用的指令将文本作为覆盖添加到捕获的图像上

我删除了

text=“{flavor}}”draw text

，我可以看到整个图像