Как получить изображение из canvas, изменить размер и отправить на сервер?

Question

[Денис Потапов]

Есть Canvas с объектами, как лучше всего и менее затратно для нагрузки на клиента - вытащить оттуда изображение, изменить его размер и отправить в FormData на сервер в виде png?
Первое что приходит в голову, это toDataURL, который вставить в созданый Image объект, дождаться загрузки (onload), потом создать canvas c нужными размерами, сделать drawImage и потом из него вытащить getImageData и добавить в FormData.
Это единственный путь или есть лучше?

p.s Изменять размер canvas откуда берется изображение нельзя

Answer 1

[profesor08]

Нет. Источником данных может выступать сам объект канваса. Значит ты просто можешь в нужном размере нарисовать на новом канвасе картинку и получить data:url.
destCtx.drawImage(sourceCanvas, 0, 0);
https://developer.mozilla.org/en-US/docs/Web/API/C...
раздел parameters

Comments

[Денис Потапов]

а как data:url можно прикрепить к FormData (multipart)? Я так понимаю нужны бинарные данные в формате PNG, чтобы на сервер отправить и создать png файл на сервере?

[Денис Потапов]

Т.е. использовать надо toBlob?

[profesor08]

Денис Потапов, как хочешь, это просто строка.