How can I display image encoded in base64 format in Angular 6?
You don't use "this" to refer the variables defined in the component "ts" file. Remove "this" may solve your problem.
Please Review this stackbliz Fiddle. Look inside the app component to see the implementation.
StackBlitz
BASE64 to image angular 2
I feel like this thread lacks concrete examples which made me have some difficulties:
Import DomSanitizer:
import { DomSanitizer } from '@angular/platform-browser';
define in constructor:
constructor(private _sanitizer: DomSanitizer) { }
Sanitize the Base64 string you want to pass as your image source (use trustResourceUrl):
this.imagePath = this._sanitizer.bypassSecurityTrustResourceUrl('data:image/jpg;base64,'
+ toReturnImage.base64string);
Bind to html:
<img [src]="imagePath">
Converting Image to base64 string in Typescript
You need to use readAsDataUrl()
:
function getBase64(event) {
let me = this;
let file = event.target.files[0];
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
//me.modelvalue = reader.result;
console.log(reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
Converting an image to base64 in angular 2
Working plunkr for base64 String
https://plnkr.co/edit/PFfebmnqH0eQR9I92v0G?p=preview
handleFileSelect(evt){
var files = evt.target.files;
var file = files[0];
if (files && file) {
var reader = new FileReader();
reader.onload =this._handleReaderLoaded.bind(this);
reader.readAsBinaryString(file);
}
}
_handleReaderLoaded(readerEvt) {
var binaryString = readerEvt.target.result;
this.base64textString= btoa(binaryString);
console.log(btoa(binaryString));
}
Converting an Image url to base64 in Angular
You can use this to get base64 image
async function getBase64ImageFromUrl(imageUrl) {
var res = await fetch(imageUrl);
var blob = await res.blob();
return new Promise((resolve, reject) => {
var reader = new FileReader();
reader.addEventListener("load", function () {
resolve(reader.result);
}, false);
reader.onerror = () => {
return reject(this);
};
reader.readAsDataURL(blob);
})
}
Then call it like this
getBase64ImageFromUrl('your url')
.then(result => testImage.src = result)
.catch(err => console.error(err));
How to convert local image file to base64 in Angular?
Not really sure what exactly are you trying to achieve here by doing this.
But FileReader
accepts blobs, as an argument to readAsDataURL
. So you'll have to read it from the URL using HttpClient
's get
method specifying responseType
as blob
. The onload
method on the reader can then be used to get the Base 64 url for the image.
Here, give this a try:
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get('https://avatars0.githubusercontent.com/u/5053266?s=460&v=4', { responseType: 'blob' })
.subscribe(blob => {
const reader = new FileReader();
const binaryString = reader.readAsDataURL(blob);
reader.onload = (event: any) => {
console.log('Image in Base64: ', event.target.result);
};
reader.onerror = (event: any) => {
console.log("File could not be read: " + event.target.error.code);
};
});
}
}
Here's a Working Sample StackBlitz for your ref.
Related Topics
Using HTML Anchor Link #Id in Angular 6
How to Resize Image in Bootstrap Carousel
Height: 100%; Not Working With Flex Box
Mp4 Video Is Not Playing on Mobile Devices and Chrome
How to Make Bootstrap 4 Cards the Same Height in Card-Columns
How to Vertically Center a Div Element For All Browsers Using Css
Using Relative Url in CSS File, What Location Is It Relative To
Setting a Max Character Length in CSS
How to Place Div in Top Right Hand Corner of Page
How to Get Angular to Reload the Same Page But With a Different Argument
Html5 Input Type Date Format to Mm/Dd/Yyyy Causing Issue in Chrome
How to Automatically Set Text Box to Uppercase