1

Только начал изучать яваскрипт и ангуляр. Использую библиотеку Poco для создания сервера. Отсылаю картинку так:

int s, len; // здесь загружаю картинку из файла в буфер.
char* buff = CWebSocketServer::FileToBuffer( len ); 
WebSocket ws( request, response );
s = ws.sendFrame( buff, len, WebSocket::FRAME_BINARY ); // 54682 передано

Клиент на AngularJS принимает данные:

var ws = new WebSocket("ws://127.0.0.1:8000/ws");
...
ws.onmessage = function (msg) {

    console.log("Message received: " + msg.data ); // [object Blob] принят
    console.log("Message length: " + msg.data.size); // 54682 байта в блобе
    $scope.image = window.btoa(msg.data);
    $scope.$apply();
}

HTML:

<img ng-src="data:image/JPEG;base64,{{image}}">

Чего еще не хватает чтобы картинка отобразилась? Правильно ли я вообще делаю?

5
  • Поскольку обработчик события ws.onmessage находится вне контекста angular, он не знает, что переменная $scope.image обновилась. Попробуйте после $scope.image = window.btoa(msg.data); написать $scope.$apply();. 24 окт 2016 в 10:26
  • $scope.$apply(); тоже использовал, не помогает :( 24 окт 2016 в 10:45
  • В таком случае надо посмотреть, что содержится в атрибуте src элемента img. Можно посмотреть в консоли браузера. 24 окт 2016 в 11:21
  • Вот строка из консоли <img ng-src="data:image/JPEG;base64,W29iamVjdCBCbG9iXQ==" src="data:image/JPEG;base64,W29iamVjdCBCbG9iXQ=="> == $0 Я не совсем понимаю что тут описано. Только начал изучать вэб 24 окт 2016 в 11:39
  • Не могу сказать, насколько верные у Вас данные в base64. Для исключения фактора angular, попробуйте изменить атрибут src с помощью нативного JS. Например: document.getElementById('myImg').src="data:image/JPEG;base64,"+window.btoa(msg.data). 25 окт 2016 в 9:07

2 ответа 2

1
ws.onmessage = m => {
    let image = new Image();
    image.src = URL.createObjectURL(m.data);
    document.body.insertAdjacentElement('beforeEnd', image);
}
0

Спасибо за помощь. Оказалось, что нужно установить для вебсокета binaryType="arraybuffer" Кому интресно, процесс описан здесь

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.