ImageHandlerService.ts

import { Injectable } from '@angular/core';

export const S3_BUCKET = 'semuaproduk-data';
export const BASE_URL = 'https://d19la03daa7iyw.cloudfront.net/';

@Injectable({
  providedIn: 'root'
})
export class ImageHandlerService {

  constructor() {
  }

  returnUrlForKey(key: string, width: number, height: number, grayscale: boolean): string {
    const request = {
      bucket: S3_BUCKET,
      key, // path to your file on the S3 bucket (ex. photos/face1.png)
      edits: {
        // smartCrop: true, // uncomment to crop around first face, will return nothing if no face is found
        // normalize: true,
        grayscale,
        sharpen: true,
        // blur: 5,
        // rotate: 180,
        resize: {
          width,
          height,
          fit: 'cover'
        }
      }
    }

    const strRequest = JSON.stringify(request);
    return  BASE_URL + btoa(strRequest);;

  }
}

Example:

imageHandlerService.returnUrlForKey(productWrap.product.s3key, productWrap.imageWidth, productWrap.imageHeight, false)