Skip to content

Cloudinary image as blur hash

Generating blur hash from Cloudinary images for my covers

Here's how I use Cloudinary to generate a blur hash for a given image.

TypeScript
CloudinaryBlurHash.ts
import {CLOUDINARY_URL} from '@/links';
 
export async function getBase64Image(imageId: string): Promise<string> {
  const response = await fetch(
    `${CLOUDINARY_URL}/w_100/e_blur:1000,q_auto,f_webp${imageId}`
  );
  const buffer = await response.arrayBuffer();
  const data = Buffer.from(buffer).toString('base64');
  return `data:image/webp;base64,${data}`;
}