Upload an image to the WordPress media library using the ImageData JavaScript object type

uploadImage.ts

import apiFetch from '@wordpress/api-fetch'

// This is also set up to clone fields from an existing image.
// Just remove imageToClone and supply the missing fields on your own.
export const uploadImage = async (image: ImageData, imageToClone: WpImage): Promise<WpImage | undefined> => {
    const canvas = document.createElement('canvas')
    canvas.width = image.width
    canvas.height = image.height
    const ctx = canvas.getContext('2d')
    if (!ctx) return
    ctx.putImageData(image, 0, 0)
    const blob: Blob = await new Promise((resolve) => {
        canvas.toBlob((blob) => {
            blob && resolve(blob)
        }, imageToClone.mime_type)
    })

    const formData = new FormData()
    formData.append('file', new File([blob], imageToClone.media_details.file))
    formData.append('alt_text', imageToClone.alt_text)
    formData.append('caption', imageToClone.caption.raw)
    formData.append('description', imageToClone.description.raw)
    return await apiFetch({
        path: 'wp/v2/media',
        method: 'POST',
        body: formData,
    })
}