How to convert bloburl to image? Help me please

I want to convert Blob URL to image.
example blob url :
“blob:http://localhost:8100/df8119f0-ebf8-463f-a7dc-21b430e105c9

this is ionic 3 code
.ts code
import { DomSanitizer, SafeResourceUrl, SafeUrl } from ‘@angular/platform-browser’;
constructor( private sanitizer: DomSanitizer)

let blob=‘blob:http://localhost:8100/df8119f0-ebf8-463f-a7dc-21b430e105c9
this.img=this.sanitizer.bypassSecurityTrustResourceUrl(blob)

html
<img [src]=“img” >

Sorry, It’s not an image file. I want the image file. please…

sorry but i don’t understand what you say

I will send image file only to api of azure. So I want to convert blob url to image file for send file image to api.

I don’t know what “api of azure” is, but any reasonable service that is expecting to get giant amounts of data posted to it should have the ability to accept multipart form data, so look for documentation about how to do that.

This is a bad idea for several reasons, most of all just sheer inefficiency. FormData is designed to transport Blobs. You already have the data in the most efficiently-transmitted format. Just send it. Follow the patterns in the MDN documentation for FormData.

Actually it is like uploading an image to a normal api, but I just want to convert the blob url to an image file.

Let’s say your Blob is 12 megabytes.

What I am proposing:

  • make a FormData object, give it a pointer to the Blob, feed it to HttpClient

Scorecard:
Amount of memory needed on JavaScript side: negligible
Total RAM usage of webview: 12MB
Base64 encoding overhead: zero
Amount of data slung across JavaScript / native bridge: zero
Amount of device filesystem used and needing cleanup management: zero
Time spent waiting on device filesystem: zero
Network bandwidth used: 12MB

What you seem to be insisting on:

  • read the Blob into a JavaScript variable
  • encode that using base64
  • pass that across the JavaScript/native bridge
  • decode the base64
  • write the results to the native filesystem
  • read from the native filesystem
  • convert that to base64
  • send that back over the bridge
  • now allocate a new JavaScript variable
  • send the base64 data up to the backend API

Scorecard:
Amount of memory used on JavaScript side: 32MB (two copies of base64-bloated 12MB)
Total RAM usage of webview: 68MB (one encoded and one binary copy on each side of the bridge, plus one more binary copy already sitting in the Blob)
Base64 encoding overhead: 3 trips of 12MB
Amount of data slung across JavaScript / native bridge: 32MB
Amount of device filesystem used and needing cleanup management: 12MB
Time spent waiting on device filesystem: 12MB read, 12MB write
Network bandwidth used: 16MB

Can I resize the image file from the converted image?

example coding?..

Already given in the MDN link.

uploadPicture() {

    const options: CameraOptions = {
      quality: 100,
      targetHeight: 200,
      targetWidth: 200,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }

    this.camera.getPicture(options).then((imageData) => {
      this.loading = this.loadingCtrl.create({
        content: 'Please wait...'
      });
      this.loading.present();

      this.selectedPhoto  = this.dataURItoBlob('data:image/jpeg;base64,' + imageData);

      this.upload(this.selectedPhoto);
    }, (err) => {
      console.log('error', err);
    });
  }
  dataURItoBlob(dataURI) {
// codej adapted from:
//  http://stackoverflow.com/questions/33486352/
//cant-upload-image-to-aws-s3-from-ionic-camera
    let binary = atob(dataURI.split(',')[1]);
    let array = [];
    for (let i = 0; i < binary.length; i++) {
      array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
  };

Again, why round-trip to base64 and back?

getPhotoBlob(): Observable<Blob> {
  return from(this.camera.getPicture({destinationType: CameraResultType.Uri})).pipe(
   map(camphoto => camphoto.webPath),
   switchMap(uri => this.http.get(uri, {responseType: "blob"}));
}

getPhotoBlob().subscribe(photo => this.upload(photo));