Setzen des content-type auf blob

Sind wir transferieren Blob (Bild) unten eine websocket und Rendern es auf eine Leinwand, auf der anderen Seite.

Wenn ich createObjectURL mit dem blob, bekomme ich diese Warnung:

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

Schaffen wir das URL-Objekt mit dem folgenden code. Der blob ist das senden über eine websocket-standard mit socket.binaryType = "blob"; auf der client-Seite:

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

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

Nur so kann ich denken, um diese Warnung zu beheben ist, erstellen Sie eine Kopie des blob mit dem folgenden code, aber ich will mich nicht vorstellen, der Aufwand für das kopieren aller Daten:

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

Die Methode wird aufgerufen, Dutzende Male pro Sekunde.

Irgendwelche Ideen auf, wie die blob-Inhalts-Typ, ohne eine doppelte Blob Objekt mit new Blob?

Können Sie zeigen, wie Sie senden Sie die blob-Daten? Beachten Sie, dass die .binaryType Eigenschaft ist nur wirksam, auf binäre Nachricht - wenn Sie das senden von Texten, die event.data wird immer eine Zeichenfolge enthalten.
Es ist sehr einfach: socket.send(message); im Node JS Ende. message ist ein binärer blob-Objekt aus einem OSX-app über SocketRocket (NSData- Typ). Die Meldung ist definitiv eine binäre blob.

InformationsquelleAutor Chris Nolet | 2013-09-25

javascript

7

Als erstes würde ich Frage mich, ob, wenn Sie sagen "Fehler" eigentlich bedeutet "Warnung". Sie sind wirklich zwei verschiedene Dinge sind und der browser Sie unterschiedlich behandelt (in der Regel nur die tracks/Warnungen, wenn die developer-tools geöffnet sind etc.).

Also erstmal würde ich die Herausforderung der Prämisse, dass dies sogar ein Problem ( der overhead des Browsers "auto-Eingabe" der blob versus overhead "newing" ein Blob etc ).

Aber, das heißt, ist der blob.type-Eigenschaft ist in der Tat inmutable in JavaScript und als solche Sie haben, um es, wenn der blob "newed". In deinem Fall klingt es wie Sie die Daten von einem Objective-C-Buchse, und nur daisy chaining Sie es nach unten über:
```
ws.send(fromObjectiveCSocket, {binary: true, mask: true});
```
Den blob-Daten, die sich aus den Objective-C-Buchse ist nicht mit dem "header" geben Sie Daten des Typs, wenn es sendet es über, und es klingt wie Sie Ihre Knoten nicht berühren, die blob an alle (haben Sie versucht, die Dekoration der neuen Blob in Ihren Knoten und dann senden, dass die Steckdose, um zu sehen, wenn es behält sich das eingeben?).

Also, was geschieht ist, dass die websocket senden Sie einfach die blob-Daten so, wie Sie es bekam, und wenn der Empfang von javascript bekommt, ist es implizit, indem Sie es mit einem neuen Blob-Recht dann und dort, nur mit einem leeren Typ.

Also im Grunde keine, es scheint nicht zu irgendeiner Weise rund um die neue Blob-Bau, wenn Sie wirklich wollen, um loszuwerden, diese Warnung. Auch wenn Sie versuchte tricks wie das hinzufügen der Art in den blob-Daten und dann Spleißen Sie es aus etc, man kann immer noch nicht rund um die websocket-Empfang-code implizit zu schreiben, wie ein blob mit einem leeren Typ.
- Cool, danke! Sie sind vor Ort auf mit deinen Vermutungen re: Fehler vs. Warnung (und ich habe aktualisiert mein Frage), und re: daisy-chaining die binären Daten von Objective-C durch Knoten, und auf dem client 🙂 ich habe nicht versucht, die Dekoration der neuen Blob-Knoten. Was ist der beste Weg, um zu versuchen, dass? Wenn es eine Vervielfältigung, am besten haben es auf die leistungsstarken server. Das könnte funktionieren. Ich bin derzeit die Einstellung der type in Objective-C mit CGImageDestinationCreateWithData (Typ kUTTypeGIF) aber scheint nicht durch zu gehen.
- durch die Dekoration auf dem server meinte ich auch versucht, neue Blob() es in der Knoten-und tatsächlich setzen der Art, dann zu sehen, wenn die blob-Sie erhalten unten aus der Steckdose bleibt der Typ... ich bin ziemlich skeptisch, dass, obwohl, speziell bei Verwendung des binären socket, Wette, es übergibt nur die Daten, damit der browser immer noch "geben" anonym.
- Ja, fair nennen. Ich hatte einen Schuss auf die Schaffung eines blob auf der server-Seite, aber den Knoten nicht unterstützt blob nativ. Weitere Gedanken auf, dass?
- Haben Sie versucht, was ist der Größe Unterschied zwischen der Herabsendung der raw-binary-blob von der Bild als {binary: true, Maske: true} und senden Sie die Base64-codierte version der blob als eine normale string-Nachricht? Wenn die Größe nicht viel anders sollte es möglich sein, verwenden Sie einfach das base64-Bild im browser statt des blob-url. Auch das ist mehr unterstützt als blob-URLs und würde weniger Speicher möglicherweise.
InformationsquelleAutor Nick Sharp
12

Betrachten wir Sie haben Blob Instanz (blob). Sie können dann slice Methode:
```
blob = blob.slice(0, blob.size, "image/jpeg")
```
... und das ist es.

Sondern erstellt nur neue blob mit den gleichen Daten, aber mit dem neuen Typ.
- dieser arbeitete für mich, thx
- Zoman du bist willkommen.
- nettes hack ändern Typ blob, wenn die readonly-propertie.
InformationsquelleAutor turkus
1

"Blob-URLs funktionieren nur mit GET-requests, und, wenn man erfolgreich angefordert, sendet der browser eine HTTP 200 OK status-code und sendet einen Content-Type-header verwendet, die das type-Eigenschaft des Blob."
```
 var bb = new BlobBuilder();
 var blob = bb.getBlob("x-optional/mime-type-here");

 //send via websocket
 //load via websocket     
```
Bin ich völlig aus hier?

Habe ich bekommen, das von https://www.inkling.com/read/javascript-definitive-guide-david-flanagan-6th/chapter-22/blobs

HTML5 Rocks scheint ein neuer Blob mit der Antwort von der XHR-Anfrage. So ist es vielleicht gar nicht so schlecht, nachdem alle. http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-response

Nur werfen sich einige Ideen.
- Dank Sheng für die Ideen. Ich glaube, Sie könnten etwas erreichen ähnlich wie meine new Blob() Lösung mit BlobBuilder, dies ist jedoch nicht obsolet: developer.mozilla.org/en-US/docs/Web/API/BlobBuilder, und würde noch erfordern kopieren von Speicher von einem ArrayBuffer (websocket-Daten), um die blob - glaube ich.
InformationsquelleAutor sheng
0

Sie wahrscheinlich sollte setzen Sie Ihre Content-Typ auf der server-Seite, bevor es
- Hi @Adassko. Habe das ausprobiert aber der type-Eigenschaft scheint nicht verändert werden. Dabei console.log(e.data) sowohl vor als auch nach der Einstellung e.data.type = 'image/gif' zeigt, dass die Eigenschaft nicht ändern. Fügte einige mehr code der Frage.
- Ja, ich habe versucht, dies von mir und bearbeitet meine Antwort. Dein code mit dem erstellen eines neuen Blob mit Inhalt kopieren funktioniert nicht, weder selbst, wenn Sie sich entscheiden, es zu benutzen
- Interessant - habe versucht die vorgeschlagenen (Speicher-intensiv) Lösung in meiner Frage, und es funktioniert in Ordnung, auf Chrome v29, obwohl zugegeben, ich habe nicht versucht es auf anderen Browsern noch.
InformationsquelleAutor Adassko
0

Lösen können Sie dieses problem aus der end-Sie liefern das Bild. Dieses problem geschieht, weil der falsche content-type, so konfigurieren Sie Ihren server zu senden, Bild mit Bild-Header.

Wenn dies in PHP haben, sollten Sie so etwas wie
```
header("Content-Type: image/jpeg");
echo $image_blob;
exit;
```
(Nur gibt Ihnen eine Idee)

Im Falle von Node.js obwohl ich kein Experte bin, können Sie die Art des Inhalts, auf das response-Objekt, wie:
```
app.get('/image.gif', function(req, res) {
  res.set('Content-Type', 'image/gif');
  res.sendfile('./image.gif');
});
```
- Klingt cool. Ich bin mit Node.js und nur das senden der Daten mit socket.send(message); über die ws - Paket (version 0.4.x). Die Nachricht ursprünglich nur ein Binär-Paket aus einem anderen websocket Ursprung in Objective-C. Irgendwelche Ideen auf, wie die Content-Type in diesem Szenario?
- Aktualisiert meine Antwort.
- Danke @Starx. Sieht aus wie dieses für GET Anfragen. In diesem Fall ist es alle websockets mit socket.binaryType = 'blob' 😉
InformationsquelleAutor Starx

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.