title: ionic2 camera image do not show entire image in template
body: <p>I am trying to use camera in my ionic2 app. I take picture with following function: </p>
  
  <pre><code>takePicture(){
      Camera.getPicture({
          sourceType: Camera.PictureSourceType.CAMERA,
          destinationType: Camera.DestinationType.FILE_URI,
          quality: 100,
          targetWidth: 1000,
          targetHeight: 1000,
          correctOrientation: true
      }).then((imageData) =&gt; {
        // imageData is a base64 encoded string
          this.base64Image = imageData;
      }, (err) =&gt; {
          console.log(err);
      });
    }
  </code></pre>
  
  <p>and display it with following HTML:</p>
  
  <pre><code>&lt;img [src]="base64Image" *ngIf="base64Image" text="{{flavour}}" draw-text crossOrigin style="max-width: : 100%; max-height: 100%;" /&gt;
  </code></pre>
  
  <p>However it do not show the complete image I took from the camera in html.
  Following is the screenshot:
  <a href="https://i.stack.imgur.com/KqbG0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KqbG0.png" alt="enter image description here"></a>
  and the original image:
  <a href="https://i.stack.imgur.com/De5L1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/De5L1.jpg" alt="enter image description here"></a></p>
  
  <p>Why there is this difference? How can I show the complete image I took?</p>
  
  <p>Note: I tried changing targetWidth values but it did not help</p>