CODEWITHSUNDEEP
cordovatypescriptionic-framework
viiskis
viiskis

Reputation: 164

Getting an image string using base64

I trying to get base64 string (using'@ionic-native/base64') of an image file uri from ('@ionic-native/image-picker'), but after running this code image seems to be broken. Any suggestions?

My html:

<img [src]="base64ImageChosen" *ngIf="base64ImageChosen"/>

Picker options:

    this.pickerOptions = {
        maximumImagesCount: 1,
        width: 10,
        height: 10,
        quality: 100,
        outputType: 0
    };

My code:

chooseImage() {
    this.imagePicker.getPictures(this.pickerOptions).then((results) => {
        for (let i = 0; i < results.length; i++) {
            let filePath: string = results[i];

            this.base64.encodeFile(filePath)
            .then((base64File: string) => {
                this.base64ImageChosen = base64File
            }, (err) => {
                console.log(err);
            })
            .then((res) =>
                this.myForm.patchValue({ imageChosen: this.base64ImageChosen })
            )
        }
    }, (err) => { });
}

Upvotes: 1

Views: 574

Answers (2)

Thameur Daly
Thameur Daly

Reputation: 319

You can use :

this.imagePicker.getPictures(options).then( (res)=>{ for (var i = 0; i < res.length; i++) { let base64 =data:image/jpeg;base64,+res[i]; this.images.push(base64); } })

Upvotes: 1

edkeveked
edkeveked

Reputation: 18381

To display the images, you need to use window.URL.createObjectURL() which will create a string representing your image object. 

let image = new Image()
image.src = filePath;
base64ImageChosen = URL.createObjectURL(image);

From your code, it seems that you want to display all the images inside a folder. I assume that you are looping inside your html template using ngFor.

Upvotes: 1

Related Questions