title: ionic 2 camera/gallery images edit by adding some text, logo etc
body: <p>I am building an Ionic2 app which uses a camera to take a photo or can look up in a gallery to choose a photo. </p>
  
  <p>I want to edit the taken photo right away by adding some text over it and putting a logo in one corner. I have a select list above the image where the user selects few options and those values will be added on the image. </p>
  
  <p>My html:</p>
  
  <pre><code>&lt;ion-card&gt;
    &lt;ion-card-content&gt;
       &lt;button ion-button (click)="takePicture()"&gt;
         &lt;ion-icon name="camera"&gt;&lt;/ion-icon&gt;
       &lt;/button&gt;
       Latest Picture:
       &lt;img [src]="base64Image" *ngIf="base64Image" /&gt;
    &lt;/ion-card-content&gt;
  &lt;/ion-card&gt;
  
   &lt;img [src]="imageSrc" *ngIf="imageSrc"/&gt;
   &lt;ion-fab right bottom&gt;
    &lt;button ion-fab color="dark" (click)="openGallery()" &gt;
      &lt;ion-icon name="images"&gt;&lt;/ion-icon&gt;
    &lt;/button&gt;
  &lt;/ion-fab&gt; 
  </code></pre>
  
  <p>And my .ts :</p>
  
  <pre><code>takePicture(){
      Camera.getPicture({
          destinationType: Camera.DestinationType.DATA_URL,
          targetWidth: 1000,
          targetHeight: 1000,
          allowEdit: true,
          saveToPhotoAlbum: true
      }).then((imageData) =&gt; {
        // imageData is a base64 encoded string
          this.base64Image = "data:image/jpeg;base64," + imageData;
      }, (err) =&gt; {
          console.log(err);
      });
    }
  
    private openGallery (): void {
    let cameraOptions = {
      sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
      destinationType: Camera.DestinationType.FILE_URI,      
      quality: 100,
      targetWidth: 1000,
      targetHeight: 1000,
      encodingType: Camera.EncodingType.JPEG,      
      correctOrientation: true
    }
  
    Camera.getPicture(cameraOptions)
      .then(file_uri =&gt; this.imageSrc = file_uri, 
      err =&gt; console.log(err));   
  }
  </code></pre>
  
  <p>Right now it looks like following:
  <a href="https://i.stack.imgur.com/kJRgg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kJRgg.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/mT5pk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mT5pk.png" alt="enter image description here"></a></p>
  
  <p>First screenshot shows the select text, and second screenshot shows an image chosen from the gallery that is shown in the app. Exactly like that image I should be able to add text, symbol, logo on my captured image.</p>
  
  <p>How can I do it?  </p>