CODEWITHSUNDEEP
angularionic-frameworkionic4
Prem Kumar
Prem Kumar

Reputation: 23

unable to view image taken from camera using fileURI

i am using angular 4/Ionic4.i need to send image to database using file_URI not data_URL because data URL is encoded in base64 which is taking too much memory. initially i used base64 which is totally fine and working but my senior told me to do the same with FILE_uri and i am struggling for 2 days to display image and send it to the database.i tried normalizing-URL,domsanitizer,web-view but didn't work.check if upload() code is correct to send image to database

 <img [src]="image"/>

 image:any;
 take(){
  const options: CameraOptions = {
    quality: 100,
    destinationType: this.camera.DestinationType.FILE_URI,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE,
    saveToPhotoAlbum: false

   }

  this.camera.getPicture(options).then((imageData) => {
// this.success = 'getting image is successful';
this.image =imageData;
// this.imageURI = this.webview.convertF(imageData);
  }, (err) => {
 this.err = err;
 });
}

upload(){
  let url="https://staging-api.kofluence.com/influencer/v1/profile";
  let postData=new FormData();
  postData.append('file',this.image);
  let data:Observable<any>=this.http.post(url,postData);
  data.subscribe((result)=>{
    console.log(result);
  }
  );
}

Upvotes: 0

Views: 647

Answers (1)

Surendra
Surendra

Reputation: 298

1. Displaying image source from fileURI in ionic

Did you tried webview ?

if not please try below steps, ionic doesn't display the images with file://.. it should be localhost://.. something.

so that install webview package and Convert a file:// URL to a URL that is compatible with the local web server in the Web View plugin.

ionic cordova plugin add cordova-plugin-ionic-webview
npm install @ionic-native/ionic-webview

usage :

import { WebView } from '@ionic-native/ionic-webview/ngx';

constructor(private webview: WebView) { }

  this.camera.getPicture(options).then((imageData) => {

this.image =this.webview.convertFileSrc(imageData);

  }, (err) => {
 this.err = err;
 });

2. Upload file blob to server

first you have to convert file to blob and then append to the formData.

Note: keep in mind here this.image is string of the file path its not a exact file.

upload:

We have to convert image to blob file and then send it to server.

upload(){
  let url="https://staging-api.kofluence.com/influencer/v1/profile";

 const blobValue = this.dataURItoBlob(this.image);

  let postData=new FormData();
  postData.append('file',blobValue);

  let data:Observable<any>=this.http.post(url,postData);
  data.subscribe((result)=>{
    console.log(result);
  }
  );

Convert dataUri to blob

 private dataURItoBlob(dataURI) {
    // convert base64 to raw binary data held in a string
    let byteString = atob(dataURI.split(',')[1]);

    // separate out the mime component
    let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to an ArrayBuffer
    let arrayBuffer = new ArrayBuffer(byteString.length);
    let _ia = new Uint8Array(arrayBuffer);
    for (let i = 0; i < byteString.length; i++) {
      _ia[i] = byteString.charCodeAt(i);
    }

    let dataView = new DataView(arrayBuffer);
    let blob = new Blob([dataView], { type: mimeString });
    return blob;
  }

Please let me know if we face any issues with this code.

Upvotes: 1

Related Questions