Как протащить изображение через SignalR?

Question

[Виктор П.]

Всем привет.
Хочу с сервера (на .net core 3.1) отправить изображение, обычное jpg, через SignalR. Получить его в браузере, в проекте ангуляра и отобразить на страничке.
Обычный текстовый чатик у меня работает.
Что я делаю с изображением:
1. На сервере делаю рассылку изображения всем (не заморачиваясь) клиентам, изображение в формате массива байтов:

byte[] file = await File.ReadAllBytesAsync(@"C:\Avatars\user7.jpg");
await Clients.All.BroadCastImage(file);

Файл существует, в переменной file появляется какой-то реальный массив байтов.

2. Подписываюсь на эту рассылку на клиенте в ангуляре:

// стандартные подключения
  public initConnection() {
    this.connection = new signalR.HubConnectionBuilder()
      .withUrl('/chat')
      .build();
  }

  public connectionWebSocket() {
    this.connection.start();

    this.connection.on("BroadCastImage", image => {
      var blob = new Blob([image], { type: "image/jpeg" });
      var reader = new FileReader();
      reader.readAsDataURL(blob);
      var that = this;
      reader.onloadend = function () {
        that.base64data = that.sanitizer.bypassSecurityTrustUrl(reader.result + '');
      }
    });
  }

Работа через FileReader взята со стаковерфлоу, но так же наткнулся на аналогичное описание в учебнике. Так же в процессе изысканий наткнулся на то, что ангуляр может некорректно обрабатывать формируемые url, добавил зависимость в конструктор:
private sanitizer: DomSanitizer

3. Далее эту переменную просто вставляю в html в тег img
<img [src]="base64data"/>

4. После отправки изображения с сервера, на клиенте отображается битая картинка. В её src лежит что-то, похожее на правду. Но дальше я не знаю, как это отлаживать

Answer 1

[Johnny Gat]

Вы не преобразовали картинку в Base64 на стороне сервера.

Comments

[Виктор П.]

верно, я её преобразовал в Base64 на стороне клиента

[Johnny Gat]

Виктор П., так на стороне сервера и не пробовали?

[Виктор П.]

Johnny Gat, нет, это лишь промежуточный шаг, в дальнейшем хочу посмотреть, как можно без конвертации отобразить байты в картинку. Через холст там или ещё как, если это возможно. Тут требуется проверить именно корректность переданных байтов. Самый логичный, как по мне, способ - конвертнуть в Base64 на клиенте, должно было отобразиться без проблем, но я встал в тупик и теперь не знаю, что с этим делать )

[Johnny Gat]

Виктор П.,

Тут требуется проверить именно корректность переданных байтов

Ну так сравните. В любом hex-редакторе откройте картинку, а на клиенте выведите на экран полученные байты.

[Виктор П.]

Спасибо, это посмотрю

Answer 2

[Виктор П.]

Кому интересно, тут произошла какая-то магия. Дело в том, что когда из c# отправляется массив байтов он автоматически конвертируется в base64 стрингу. Мне понадобилось некоторое время, чтобы осознать это. Причин такого поведения я не нашёл в интернете, буду рад, если кто подскажет.
В моём коде я по сути делал двойную конвертацию в base64, это всё не нужно, вот верный код:

this.connection.on("BroadCastImage", image => {
      this.base64data = this.sanitizer.bypassSecurityTrustUrl('data:image/jpeg;base64,' + image);
    });

Comments

[OwDafuq]

SignalR сам автоматически, обычно, отправляет массив байт как base64 строку