ionic2相机图像不会在模板中显示整个图像 [英] ionic2 camera image do not show entire image in template

问题描述

我正在尝试在我的ionic2应用程序中使用相机。我用下面的函数拍照：

I am trying to use camera in my ionic2 app. I take picture with following function:

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显示：

and display it with following HTML:

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

然而，它没有显示我从相机中获取的完整图像。
以下是截图：

和原始图片：

However it do not show the complete image I took from the camera in html. Following is the screenshot: and the original image:

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

Why there is this difference? How can I show the complete image I took?

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

Note: I tried changing targetWidth values but it did not help

推荐答案

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

It was because the directive I am using to add text as an overlay to the captured image.

我删除了 text ={{flavor}}draw-text 我可以看到整个图片。

I removed text="{{flavour}}" draw-text and I could see the entire image.

这篇关于ionic2相机图像不会在模板中显示整个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！