Ustawianie typu zawartości na obiekcie blobowym

Question

Przenosimy plik Blob (obraz) w dół do pliku WWW i renderujemy go do obszaru roboczego na drugim końcu.

Gdy używam createObjectURL z kropelka, mam to ostrzeżenie:

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

Tworzymy URL obiektu przy użyciu następującego kodu. Blob jest przesłać za pomocą standardowego websocket z socket.binaryType = "blob"; po stronie klienta:

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

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

Jedynym sposobem mogę myśleć, aby rozwiązać ten jest ostrzeżenie, aby utworzyć kopię blob z następującego kodu, ale nie wiem chcesz wprowadzić narzut kopiowania wszystkich danych:

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

Ta metoda jest wywoływana dziesiątki razy na sekundę.

Wszelkie pomysły na temat ustawiania typu zawartości bloba bez tworzenia duplikatu obiektu Blob z new Blob?

Answer 1

Najpierw chciałbym się zastanowić, czy kiedy mówisz "błąd", masz na myśli "ostrzeżenie". Są to naprawdę dwie różne rzeczy, a przeglądarka traktuje je inaczej (zwykle tylko śledzi/podnosi ostrzeżenia, gdy narzędzia programistyczne są otwarte itp.).

Tak więc najpierw zakwestionowałbym założenie, że jest to nawet problem (obciążenie przeglądarki "automatycznym pisaniem" plamą w porównaniu do kosztów "wstawiania" Bloba itp.).

Ale, powiedział, kropelka.Właściwość type jest rzeczywiście niewspółmierna w JavaScript i jako taka musisz ją ustawić, gdy obiekt blob jest "nowy". W twoim przypadku to brzmi jak jesteś uzyskiwanie danych z gniazda Objective-C i tylko stokrotka łączenia go poprzez:

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

Dane blob sama z gniazda Objective-C nie zawierający „nagłówka” typ dane tego typu, gdy przesyła je, i wygląda na to, że twój węzeł wcale nie dotyka blobu (czy próbowałeś zdobienia nowego Bloba w swoim węźle, a następnie wysłałeś go w głąb gniazda, aby sprawdzić, czy zachowuje on pisanie?) .

To, co się dzieje, to że websocket wysyła tylko dane blobu, gdy je otrzyma, a gdy odbiera je javascript, to niejawnie wpisuje go z nowym Blobem zaraz i tam, tylko z pustym typem .

W zasadzie nie, wydaje się, że nie ma żadnego sposobu obejścia nowej konstrukcji Blob, jeśli naprawdę chcesz pozbyć się tego ostrzeżenia. Nawet jeśli próbowałeś sztuczek, takich jak dodawanie typu do danych typu blob, a następnie ich łączenie itd., Nadal nie możesz ominąć kodu otrzymującego websocket, niejawnie wpisując go jako blob z pustym typem.

Answer 2

Prawdopodobnie należy ustawić Content-Type po stronie serwera przed wysłaniem go

Answer 3

Można rozwiązać ten problem od końca jesteś dostarczając obraz. Ten problem występuje z powodu niewłaściwego typu zawartości, więc powinieneś skonfigurować swój serwer, aby wysyłał obraz z nagłówkami obrazów.

Jeśli było to w PHP, trzeba mieć coś podobnego

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

(tylko dawać wyobrażenie)

W przypadku node.js, choć nie jestem ekspertem można ustawić typ zawartości na obiekcie odpowiedzi jak:

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

Answer 4

„Blob URL działa tylko z żądań gET, a gdy jeden jest z powodzeniem wniosek, B rowser wysyła kod statusu HTTP 200 OK, a także wysyła nagłówek Content-Type, który wykorzystuje właściwość type obiektu Blob. "

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

//send via websocket 
//load via websocket  

Czy jestem całkowicie wyłączony?

stałam się tym wszystkim z https://www.inkling.com/read/javascript-definitive-guide-david-flanagan-6th/chapter-22/blobs

HTML5 Rocks wydaje się być co nowego Blob z reakcji z użyciem nagłówków XHR życzenie. Więc może wcale nie jest tak źle. http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-response

Po prostu wyrzucam kilka pomysłów.