Чтобы вырезать изображение в Canvas

Ваш вопрос не ясен. Пример кода не соответствует описанию проблемы. Поскольку пример кода не работает (неопределенная переменная data), я могу только пойти по описанию проблемы.

I receive data (height, width, x, y). I want to cut an image from the canvas according to this data and save it as a blob-file. How can I do this?

Вырезать из изображения

Вырезать прямоугольную область из холста

function cutArea(fromImage, x, y, width, height) {
    const cut = document.createElement("canvas");
    cut.width = width;
    cut.height = height;
    const ctx = cut.getContext("2d");
    ctx.drawImage(fromImage, -x, -y);
    return cut;
}

Вы должны использовать offscreenCanvas, но поддержка ограничена, поэтому добавьте его, если вы знаете, каковы ваши цели. Создание выреза Canvas за кадром

function cutArea(fromImage, x, y, width, height) {
    const cut = new OffscreenCanvas(width, height);
    const ctx = cut.getContext("2d");
    ctx.drawImage(fromImage, -x, -y);
    return cut;
}

Примечание

• Проверяет, что масштаб пикселей неизменен и нет границ. Часть или все вырезанное изображение может быть пустым (0 альфа), если координаты не лежат на исходном изображении.
• fromImage может быть любым допустимым источником изображения, включая холст.
• width и height должны быть > 0, иначе функции выдадут ошибку.

Скачать

Чтобы загрузить вырезку в локальное хранилище в виде загруженного файла изображения "image/png". Примечание. Имя файла может быть изменено пользователем при загрузке. Тип изображения по умолчанию png. Невозможно узнать, прошла ли загрузка успешно.

function downloadCut(cut, name) {
    const a = document.createElement("a");
    a.download = name + ".png"; 
    const download = blob => {
        const url = a.href = URL.createObjectURL(blob);
        a.dispatchEvent(new MouseEvent("click", {view: window, bubbles: true, cancelable: true})); 
        setTimeout(() => URL.revokeObjectURL(url), 1000); // clean up 
    }
    if (cut instanceof OffscreenCanvas) { cut.convertToBlob().then(download) }
    else { canvas.toBlob(download) }
}