resizeImage.ts

function drawResizedImage(
    context: CanvasRenderingContext2D,
    imageElement: HTMLImageElement,
    width: number = context.canvas.width,
    height: number = context.canvas.height,
    ) {
    // eventual image offset (0.5 is center)
    const offsetX = 0.5;
    const offsetY = 0.5;
    // set image values;
    const imageWidth = imageElement.width;
    const imageHeight = imageElement.height;
    const imageRatio = Math.min(width / imageWidth, height / imageHeight);
    let renderWidth = imageWidth * imageRatio;
    let renderHeight = imageHeight * imageRatio;
    let relativeRatio = 1;

    // deciding what direction the gap should fill
    if (renderWidth < width) {
        relativeRatio = width / renderWidth;
    }
    // update the average after deciding gap
    if (Math.abs(relativeRatio - 1) < 1e-14 && renderHeight < height) {
        relativeRatio = height / renderHeight;
    }
    renderWidth *= relativeRatio;
    renderHeight *= relativeRatio;

    // calculating source rectangle
    let canvasWidth = imageWidth / (renderWidth / width);
    let canvasHeight = imageHeight / (renderHeight / height);
    let canvasOffsetX = (imageWidth - canvasWidth) * offsetX;
    let canvasOffsetY = (imageHeight - canvasHeight) * offsetY;

    // make sure source rectangle is valid
    if (canvasOffsetX < 0) { canvasOffsetX = 0; }
    if (canvasOffsetY < 0) { canvasOffsetY = 0; }
    if (canvasWidth > imageWidth) { canvasWidth = imageWidth; }
    if (canvasHeight > imageHeight) { canvasHeight = imageHeight; }

    // fill image in context
    context.drawImage(
        imageElement,
        canvasOffsetX,
        canvasOffsetY,
        canvasWidth,
        canvasHeight,
        0,
        0,
        width,
        height,
    );
}

export default function resizeImage(imageUrl: string, resizeWidth: number, resizeHeight: number) {
    return new Promise<string>((resolve) => {
        const canvas = document.createElement("canvas");
        const context = canvas.getContext("2d");

        if (context) {
            canvas.width = resizeWidth;
            canvas.height = resizeHeight;
            const image = document.createElement("img");
            image.onload = () => {
                drawResizedImage(context, image, resizeWidth, resizeHeight);

                const dataUrl = canvas.toDataURL();
                resolve(dataUrl);
            };
            image.src = imageUrl;
        }
    });
}

usage.ts

resizeImage('/image.jpg', 500, 100).then((url) => {
    const imgEl = document.getElementById("img") as HTMLImageElement;
    imgEl.src = url;
});