2

i am using ng2-image cropper, for that is not taking "src" attribute it take "image" Attribute.

So if i give dataUrl, image is not displaying in the cropper.

I am using camera for image and i am getting base64 image from it.

want to convert base64 dataUrl to image so that it can be given in 

//component.html 

<div *ngSwitchCase="'camera'">
        <mat-dialog-actions>
            <button mat-raised-button class="capture" (click)="capture()">Take Photo</button>
            <button mat-raised-button mat-dialog-close class="cancel" (click)="closeCamera()" (click)="openDialog()">Cancel</button>
        </mat-dialog-actions>
        <canvas #canvas id="canvas" width="400" height="400"></canvas>
    </div>
    <img-cropper #cropper [image]="data" [settings]="cropperSettings"></img-cropper>


    <span class="result rounded" *ngIf="data">


    <img src="{{data}}" [width]="cropperSettings.croppedWidth"       
      [height]="cropperSettings.croppedHeight"> 

    </span>

Taking image from camera and drawing in canvas and pushing that in to dataUrl 

   // 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);
}
SaiRam Ponnuri
  • 21
  • 1
  • 1
  • 2
  • 2
    If you have a data url and you want it to be shown in an `img` element, just set the src to the data url. You don't need to convert it to an image. – Lansana Camara Aug 14 '18 at 14:46
  • i need to set to image in . It is not taking data url, but it is taking image – SaiRam Ponnuri Aug 16 '18 at 14:46
  • Even so, just use the image as your feed to the . Just create an image, set the src to the data URL, and use that image for your . In any event, check my answer, should set you in the right direction if you absolutely most convert the data URL to something useful, such as a blob. – Lansana Camara Aug 16 '18 at 16:41

2 Answers2

6

You can do the following...

First, convert the data URL to a blob:

convertDataUrlToBlob(dataUrl): Blob {
    const arr = dataUrl.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);

    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }

    return new Blob([u8arr], {type: mime});
}

Next, use the blob to create an object URL:

const objectURL = URL.createObjectURL(convertDataUrlToBlob(dataUrl));

Finally, use the object URL as the src of your image:

document.getElementById('myImage').src = objectURL;

If you want, you can also convert the Blob into a File:

const file = new File([convertDataUrlToBlob(dataUrl)], filename, {type: `image/${extension}`});
Lansana Camara
  • 9,497
  • 11
  • 47
  • 87
0
<image-cropper [imageURL]="fileurl">
</image-cropper>

imageURL will accept any variable like "fileurl" in .ts file

shA.t
  • 16,580
  • 5
  • 54
  • 111
Srikanth Naidu
  • 787
  • 5
  • 16
  • 28