How to Convert Base64 to Webp in Angular A Comprehensive Guide

To convert a Base64 string to a WebP image format in Angular, you can use the following approach:

First, install the webp-converter package by running the following command in your Angular project:

npm install webp-converter

Import the webp_converter module in your Angular component:

import * as webp_converter from 'webp-converter';

Define a function that takes in a Base64 string and converts it to a WebP image format:

async convertBase64ToWebP(base64: string): Promise<string> {
  const imageData = atob(base64.split(',')[1]);
  const arrayBuffer = new ArrayBuffer(imageData.length);
  const uint8Array = new Uint8Array(arrayBuffer);
  for (let i = 0; i < imageData.length; i++) {
    uint8Array[i] = imageData.charCodeAt(i);
  }
  const converted = await webp_converter.buffer2webpbuffer(uint8Array.buffer);
  const blob = new Blob([converted], { type: 'image/webp' });
  const urlCreator = window.URL || window.webkitURL;
  return urlCreator.createObjectURL(blob);
}

Call the convertBase64ToWebP function with the Base64 string and then display the resulting image:

const webpUrl = await this.convertBase64ToWebP(base64String);
// set the image source to the converted WebP URL

Note that the webp-converter package may not be compatible with all browsers. Therefore, you may need to add browser-specific checks or use a different library if necessary.