PNG или JPG (не rgb) через веб-сокет с ArrayBuffer без base64

Question

Есть ли способ визуализации изображения PNG на холсте без необходимости кодировать его в base64?

Сервер отправляет PNG в двоичном формате, клиент получает его в ArrayBuffer и отображает его на холсте. Единственный способ заставить это работать - это кодировать данные в base64 - на стороне сервера - так как мне нужно, чтобы это было быстро. На стороне клиента я создал изображение obj с data:image/png;base64 тег.

Я знаю, что вы можете создать BLOB-объект и программу чтения файлов, но я не смог заставить это работать.

Это версия блоба:

var blob  = new Blob([image.buffer],{type: "image/png"});
var imgReader = new FileReader();

imgReader.onload = function (e) {
  var img = new Image();
  img.onload = function (e) {
    console.log("PNG Loaded");
    ctx.drawImage(img, left, top);
    window.URL.revokeObjectURL(img.src);    
    img = null;  
  };

  img.onerror = img.onabort = function () {         
    img = null;
  };
  img.src = e.target.result;              
  imgReader = null;
}
imgReader.readAsDataURL(blob);  

изображение является Uint8Array. Я создаю из этого блоб. Остальное не требует пояснений.

Изображения являются правильными и действительными изображениями PNG. Когда я отправляю его с сервера, я записываю их в файл на стороне сервера, и они прекрасно отображаются с помощью средства просмотра изображений.

Answer 1

Вы можете создать URL-адрес BLOB-объекта с помощью createObjectURL без необходимости делать какие-либо кодировки base64, просто передайте блоб, который вы создали для него, и у вас будет URL, который вы можете установить как img.src

  var blob  = new Blob([image],{type: "image/png"});
  var img = new Image();
  img.onload = function (e) {
    console.log("PNG Loaded");
    ctx.drawImage(img, left, top);
    window.URL.revokeObjectURL(img.src);    
    img = null;  
  };

  img.onerror = img.onabort = function () {         
    img = null;
  };
  img.src = window.URL.createObjectURL(blob); 

Answer 2

Я только видел, как это используется таким образом. Если вы не хотите отправлять base64 через сеть, вы можете использовать btoa преобразовать двоичные данные в base64 на стороне клиента.

Глядя на MDN, drawImage занимает CanvasImageSource объект. CanvasImageSource представляет любой объект типа HTMLImageElement, ImageBitmap и несколько других.

При дальнейшем поиске я нашел некоторую информацию, связанную с ImageBitmap, но не достаточно, чтобы предоставить решение.

Я мог бы добавить это к комментарию, но он стал бы массивным комментарием и потерял бы всю ясность.