Working entirely on the client side, I intend to use an HTTP service that responds to a POST request by sending a BMP file with the response type set to image/bmp.
How can I draw this image to an HTML canvas object using JavaScirpt?
Here's a piece of code that results in a gibberish image (due to an incorrect processing of raw binary data?):
function refresh() {
var request = new XMLHttpRequest();
request.open('POST', 'imgview');
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.setRequestHeader('Response-Type', 'image/bmp');
request.onload = function(event) {
if (request.status >= 200 && request.status < 300) {
var blob = new Blob([request.response], {type: 'image/bmp'});
var imageURL = window.URL.createObjectURL(blob);
var image = new Image;
image.crossOrigin = "Anonymous";
image.onload = function() {
console.log(image.width)
document.body.appendChild(image);
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
}
image.src = imageURL;
} else {
// [...]
}
};
// [...]
request.send(requestText);