Как в JavaScript можно конвертировать картинку в массив байтов, для последующей передачи картинки через веб-сокет?

Question

[apelsinovi-sok]

Все что я смог отыскать на эту тему, это преобразование картинки в base64 с дальнейшей отправкой через сокет

Answer 1

[Сергей Соколов]

Создать canvas, отрисовать в них картинку, получить из канвы Blob, из него ByteArray.

Примерно так:

const img = document.querySelector("img");

const canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;

const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);

canvas.toBlob((blob) => {
  blob.arrayBuffer()
  .then((buf) => {
    // тут как-то отправить эту буффонаду через WebSocket
  })
  .catch(console.error)
  ;

}, "image/png");

★ картинка должна загружаться с того же домена, что и страница, иначе она будет считаться «небезопасной» и не получиться её так прогнать через canvas.

Answer 2

[Дмитрий Беляев]

https://developer.mozilla.org/ru/docs/Web/API/File...
https://developer.mozilla.org/en-US/docs/Web/API/R...
А то, как получить из картинки Blob - зависит от того, в каком виде у Вас сейчас картинка

Answer 3

[Developer]

Можно base64, а можно POST-запрос multipart передать набор байтов