在blob上設置內容類型

Question

我們將Blob （圖像）傳輸到websocket並將其渲染到另一端的畫布上。

當我使用帶有blob的createObjectURL時，我收到此警告：

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

我們使用以下代碼創建對象URL。 blob通過帶有socket.binaryType = "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內容類型而不創建具有new Blob的重復Blob對象的任何想法？

Answer 1

讓我們考慮你有Blob實例（ blob ）。 你可以使用then slice方法：

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

就是這樣。

它只是創建具有相同數據的新blob，但具有新類型。

Answer 2

首先，我想知道當你說“錯誤”時，你實際上是指“警告”。 它們實際上是兩個不同的東西，瀏覽器以不同的方式處理它們（它通常只在開發人員工具打開時跟蹤/引發警告等）。

所以首先我要挑戰的前提是這甚至是一個問題（瀏覽器“自動鍵入”blob的開銷與“刷新Blob等”的開銷）。

但是，那就是說，blob.type屬性確實在JavaScript中是不可變的，因此你必須在blob“newed”時設置它。 在您的情況下，聽起來您正在從Objective-C套接字獲取數據，並通過以下方式將其菊花鏈接下來：

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

來自Objective-C套接字的blob數據本身在發送它時不包含該類型的“標題”類型數據，並且聽起來你的節點根本沒有觸及blob（你試過裝飾新的Blob嗎？您的節點，然后將其發送到套接字以查看它是否保留鍵入？）。

所以正在發生的事情是websocket正在發送blob數據，因為它得到它，當接收到的javascript得到它時，它隱含地用新的Blob鍵入它然后就在那里，只是一個空白類型。

所以基本上沒有，如果你真的想要擺脫這個警告，似乎沒有任何辦法繞過新的Blob構造。 即使您嘗試了將類型添加到blob數據中然后將其拼接出來等技巧，您仍然無法繞過websocket接收代碼，隱式地將其鍵入為具有空白類型的blob。

Answer 3

“Blob URL僅適用於GET請求，當成功請求時，瀏覽器會發送HTTP 200 OK狀態代碼，並發送使用Blob類型屬性的Content-Type標頭。”

 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 Rocks似乎正在使用XHR請求的響應創建一個新的Blob。 所以也許它畢竟不是那么糟糕。 http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-response

只是拋出一些想法。

Answer 4

您可能應該在發送之前在服務器端設置Content-Type

Answer 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');
});