Set content-type on blob
Chris Nolet’s Question:
We’re transferring a Blob (image) down a websocket and rendering it to a canvas on the other end.
When I use createObjectURL with the blob, I get this error:
Resource interpreted as Image but transferred with MIME type text/plain: "blob:https%3A//staging.app.io/23f53ce3-5a52-4e12-8686-190eb15a9ede".
We create the object URL using the following code. The blob is send via a standard websocket with socket.binaryType = "blob"; on the client side:
socket.onmessage = function(e) {
var blob = e.data;
var url = (window.URL || window.webkitURL).createObjectURL(blob);
var image = document.createElement('img');
image.src = url;
}
The only way I can think to address this error is to create a copy of the blob with the following code, but I don’t want to introduce the overhead of copying all the data:
var blob = new Blob([e.data], {
type: 'image/gif'
});
The method gets called dozens of times per second.
Any ideas on how to set the blob content-type without creating a duplicate Blob object with new Blob?
You can solve this problem from the end you are delivering the image. This problem is happening because of the wrong content-type, so you should configure your server to send image with image headers.
If this was in PHP, you should have something like
header("Content-Type: image/jpeg");
echo $image_blob;
exit;
(Just giving you an idea)
In case of Node.js, though I am not an expert you can set the content type on the response object like:
app.get('/image.gif', function(req, res) {
res.set('Content-Type', 'image/gif');
res.sendfile('./image.gif');
});
