Установить тип содержимого на blob

Мы переносим Blob (изображение) вниз по websocket и передаем его на холст на другом конце.

Когда я использую createObjectURL с blob, я получаю это предупреждение:

Resource interpreted as Image but transferred with MIME type text/plain: "blob:https%3A//example.com/demo".

Мы создаем URL-адрес объекта, используя следующий код. BLOB отправляется через стандартный websocket с socket.binaryType = "blob"; на стороне клиента:

socket.onmessage = function(e) {
  var blob = e.data;
  var url = (window.URL || window.webkitURL).createObjectURL(blob);

  var image = document.createElement('img');
  image.src = url;
}

Единственный способ, с помощью которого я могу ответить на это предупреждение, - создать копию blob со следующим кодом, но я не хочу вводить накладные расходы на копирование всех данных:

var blob = new Blob([e.data], {
  type: 'image/gif'
});

Метод вызывается десятками раз в секунду.

Любые идеи о том, как установить тип содержимого blob, не создавая дублирующий объект Blob с new Blob?

Ответ 1

Сначала я бы подумал, если вы говорите "ошибка", вы на самом деле имеете в виду "предупреждение". Они действительно две разные вещи, и браузер рассматривает их по-разному (обычно он только отслеживает/предупреждает предупреждения, когда инструменты разработчика открыты и т.д.).

Итак, сначала я бы поставил под сомнение предположение, что это даже проблема (накладные расходы браузера "автоматическая типизация" blob по сравнению с накладными расходами "новичка" на Blob и т.д.).

Но, тем не менее, свойство blob.type действительно бесполезно в JavaScript, и поэтому вы должны установить его, когда blob "newed". В вашем случае это звучит так, как будто вы получаете данные из сокета Objective-C и просто соединяете его с помощью:

ws.send(fromObjectiveCSocket, {binary: true, mask: true});

Собственные данные blob из сокета Objective-C не содержат данные типа "header" типа, когда он отправляет его, и похоже, что ваш node вообще не касается blob (попробовали ли вы украшая новый Blob в вашем node, а затем отправляя его по сокету, чтобы увидеть, сохраняет ли он текст?).

Итак, происходит то, что websocket отправляет только данные blob по мере его получения, и когда получающий javascript получает его, он неявно вводит его с новым Blob прямо тогда и там, просто с пустым типом.

Таким образом, по существу нет, похоже, что вокруг новой конструкции Blob нет никакого способа, если вы действительно хотите избавиться от этого предупреждения. Даже если вы пробовали трюки, такие как добавление типа в данные blob, а затем их сплайсинг и т.д., Вы все равно не можете обойти код приема websocket, неявно набрав его как blob с пустым типом.

Ответ 2

Предположим, у вас есть экземпляр Blob (blob). Тогда вы можете использовать метод slice:

blob = blob.slice(0, blob.size, "image/jpeg")

и что это.

Он просто создает новый BLOB-объект с теми же данными, но с новым типом.

Ответ 3

"URL-адреса Blob работают только с запросами GET, и когда один из них успешно запрошен, браузер отправляет код состояния HTTP 200 OK, а также отправляет заголовок Content-Type, который использует свойство типа Blob."

 var bb = new BlobBuilder();
 var blob = bb.getBlob("x-optional/mime-type-here");

 //send via websocket
 //load via websocket

Я совсем здесь?

Я получил все это из https://www.inkling.com/read/javascript-definitive-guide-david-flanagan-6th/chapter-22/blobs

HTML5 Скалы, кажется, создают новый Blob с ответом на запрос XHR. Так что, может быть, это не так уж плохо. http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-response

Просто выкидывайте некоторые идеи.

Ответ 4

Вероятно, вы должны установить свой Content-Type на стороне сервера, прежде чем отправлять его

Ответ 5

Вы можете решить эту проблему с момента, когда вы доставляете изображение. Эта проблема происходит из-за неправильного типа содержимого, поэтому вы должны настроить сервер для отправки изображения с заголовками изображений.

Если это было в PHP, вы должны иметь что-то вроде

header("Content-Type: image/jpeg");
echo $image_blob;
exit;

(Просто давая вам идею)

В случае Node.js, хотя я не эксперт, вы можете установить тип содержимого для объекта ответа, например:

app.get('/image.gif', function(req, res) {
  res.set('Content-Type', 'image/gif');
  res.sendfile('./image.gif');
});