Đặt loại nội dung trên blob

Question

Chúng tôi đang chuyển một hình ảnh Blob (hình ảnh) xuống một websocket và hiển thị nó lên canvas ở đầu kia.

Khi tôi sử dụng createObjectURL với blob, tôi nhận được cảnh báo này:

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

Chúng tôi tạo ra các URL đối tượng sử dụng đoạn mã sau. Blob được gửi qua một WebSocket tiêu chuẩn với socket.binaryType = "blob"; trên các mặt hàng:

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

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

Cách duy nhất tôi có thể nghĩ để giải quyết cảnh báo này là để tạo ra một bản sao của blob với đoạn mã sau, nhưng tôi không muốn giới thiệu chi phí sao chép tất cả dữ liệu:

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

Phương pháp này được gọi là hàng chục lần mỗi giây.

Bất kỳ ý tưởng nào về cách đặt loại nội dung blob mà không tạo đối tượng Blob trùng lặp với new Blob?

Answer 1

Trước tiên, tôi tự hỏi liệu khi bạn nói "lỗi", bạn thực sự có nghĩa là "cảnh báo". Chúng thực sự là hai thứ khác nhau và trình duyệt xử lý chúng một cách khác nhau (nó thường chỉ theo dõi/tăng cảnh báo khi các công cụ phát triển được mở vv).

Vì vậy, trước tiên tôi sẽ thách thức tiền đề rằng đây thậm chí là một vấn đề (trên đầu của trình duyệt "tự động gõ" blob so với phí "làm mới" lên Blob, v.v.).

Nhưng, điều đó nói lên, đốm màu.loại tài sản thực sự là inmutable trong JavaScript và như vậy bạn phải thiết lập nó khi blob là "mới". Trong trường hợp của bạn có vẻ như bạn đang nhận được dữ liệu từ một ổ cắm Objective-C và chỉ daisy chaining nó xuống qua:

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

Dữ liệu blob chính nó từ các ổ cắm Objective-C không được chứa các "tiêu đề" loại dữ liệu của kiểu khi nó gửi nó qua và có vẻ như nút của bạn không chạm vào đốm màu (bạn đã thử trang trí Blob mới trong nút của mình rồi gửi xuống ổ cắm để xem nó có giữ lại kiểu gõ không?) . Vì vậy, những gì đang xảy ra là websocket gửi xuống chỉ các dữ liệu blob như nó đã nhận nó và khi javascript nhận được nó, nó là ngầm nhập nó với một Blob mới ngay sau đó và ở đó, chỉ với một loại trống .

Vì vậy, về cơ bản không có, dường như không có bất kỳ cách nào xung quanh việc xây dựng Blob mới nếu bạn thực sự muốn loại bỏ cảnh báo này. Ngay cả khi bạn đã thử các thủ thuật như thêm loại vào dữ liệu blob và sau đó ghép nó ra vv, bạn vẫn không thể nhận được xung quanh mã nhận websocket ngầm nhập nó như là một blob với một loại trống.

Answer 2

Bạn có thể nên đặt Loại nội dung của mình ở phía máy chủ trước khi gửi nó

Answer 3

Bạn có thể giải quyết vấn đề này từ cuối bạn đang phân phối hình ảnh. Sự cố này xảy ra do loại nội dung sai, vì vậy bạn nên định cấu hình máy chủ của mình để gửi hình ảnh có tiêu đề hình ảnh.

Nếu đây là trong PHP, bạn nên có một cái gì đó giống như

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

(Chỉ cần tạo cho bạn một ý tưởng)

Trong trường hợp của Node.js, mặc dù tôi không phải là một chuyên gia, bạn có thể đặt loại nội dung trên đối tượng phản hồi như:

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

Answer 4

"URL chỉ hoạt động với yêu cầu GET và khi một URL được yêu cầu thành công, rowser gửi mã trạng thái HTTP 200 OK và cũng gửi tiêu đề Kiểu nội dung sử dụng thuộc tính type của Blob. "

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

//send via websocket 
//load via websocket  

Tôi có hoàn toàn tắt ở đây không?

tôi đã nhận được tất cả điều này từ https://www.inkling.com/read/javascript-definitive-guide-david-flanagan-6th/chapter-22/blobs

HTML5 Rocks dường như được thực hiện một Blob mới với phản hồi từ yêu cầu XHR. Vì vậy, có lẽ nó không phải là quá xấu sau khi tất cả. http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-response

Chỉ cần ném ra một số ý tưởng.