HEIC file in Angular

In this Blog I will show how to convert HEIC file to PNG/JPEG using heic2any npm package in Angular

Step 1 : Install heic2any npm package in your project

npm i heic2any

Get Gary Glitter Charles’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Step 2 : Copy below code in your html file, eg ( app.component.html )

<div>

<input name=file type=file accept=”.heic” (change)=”heicConvert($event)”>

<img style=”width: 250px;height: 250px;” *ngIf=”base64Img” [src]=”base64Img” alt=”” srcset=””>

</div>

Step 3 : copy below code in your ts file, eg ( app.component.ts )

base64Img: any;

heicConvert(event: any) {

let file = event.target.files[0];

console.log(file);

heic2any({

blob: file,

// it can be “image/jpeg”, “image/png” or “image/gif”

// defaults to “image/png”

toType: “image/png”

})

.then((convertHeicTopng: any) => {

var reader = new FileReader();

reader.readAsDataURL(convertHeicTopng);

reader.onloadend = () => {

var base64data = reader.result;

this.base64Img = base64data

console.log(base64data);

}

})

}

That's all. Enjoy converting HEIC file to png/jpeg. Download this project using below url.

GitHub - GaryGlitterCharles/heictoAngular: HEIC file to png/jpec using Angular