title: How to convert base64 dataUrl into image in typescript
body: <p>i am using ng2-image cropper, for that  is not taking "src" attribute it take "image" Attribute.</p>
  
  <p>So if i give dataUrl, image is not displaying in the cropper.</p>
  
  <p>I am using camera for image and i am getting base64 image from it.</p>
  
  <p>want to convert base64 dataUrl to image so that it can be given in </p>
  
  <pre><code>//component.html 
  
  &lt;div *ngSwitchCase="'camera'"&gt;
          &lt;mat-dialog-actions&gt;
              &lt;button mat-raised-button class="capture" (click)="capture()"&gt;Take Photo&lt;/button&gt;
              &lt;button mat-raised-button mat-dialog-close class="cancel" (click)="closeCamera()" (click)="openDialog()"&gt;Cancel&lt;/button&gt;
          &lt;/mat-dialog-actions&gt;
          &lt;canvas #canvas id="canvas" width="400" height="400"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
      &lt;img-cropper #cropper [image]="data" [settings]="cropperSettings"&gt;&lt;/img-cropper&gt;
  
  
      &lt;span class="result rounded" *ngIf="data"&gt;
  
  
      &lt;img src="{{data}}" [width]="cropperSettings.croppedWidth"       
        [height]="cropperSettings.croppedHeight"&gt; 
  
      &lt;/span&gt;
  </code></pre>
  
  <p>Taking image from camera and drawing in canvas and pushing that in to dataUrl </p>
  
  <pre><code>   // component.ts
      public async capture() {
      var context = this.canvas.nativeElement.getContext("2d").drawImage(this.video.nativeElement, 0, 0, 400, 400);
      await this.captures.push(this.canvas.nativeElement.toDataURL("image/png"));
      this.state = 'photo';
      this.data = this.canvas.nativeElement.toDataURL("image/png");
      localStorage.setItem('webcam', this.data);
  }
  </code></pre>