Вырезать изображение в Canvas - PullRequest
Новая
       16

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

0 голосов
/ 15 марта 2019

У меня есть изображение в Canvas. 

const canvas = document.createElement('canvas')
canvas.width = 640
canvas.height = 480
const context = canvas.getContext('2d')
element.appendChild(canvas)
const imageData = context.createImageData(640, 480)
imageData.data.set(new Uint8ClampedArray(data.frame))
context.putImageData(imageData, 0, 0)

Я получаю данные (высота, ширина, x, y).Я хочу вырезать изображение с холста в соответствии с этими данными и сохранить его как BLOB-файл.Как я могу это сделать?

1 Ответ

0 голосов
/ 16 марта 2019

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

Я получаю данные (высота, ширина, x, y).Я хочу вырезать изображение с холста в соответствии с этими данными и сохранить его как BLOB-файл.Как я могу это сделать?

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

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

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, но поддержкаограниченный, поэтому добавьте его, если вы знаете, каковы ваши целиЧтобы создать offscreenCanvas cut 

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) }
}
...