There are similar questions, but the answers all use canvas. It'll be slow and I think it's unnatural.
I searched and it seemed that I can use XMLHttpRequest. But I tried all examples and failed (although I got some data,they failed to form ImageData).
function getdata(){
var xhr=new XMLHttpRequest()
xhr.responseType="blob" // or something else?
xhr.onload=function(){
temp=xhr.response
}
xhr.open("GET","favicon.ico",true)
xhr.send()
}
// what to do next?
EDIT: I shall repeat myself again : no canvas
<!DOCTYPE html>
<meta charset="utf-8"/>
<html>
<head>
<title>Load Image</title>
</head>
<body>
<img id="my_image"/>
<canvas id="my_canvas"></canvas>
<script type="text/javascript">
loadImage();
var blob;
var blobUrl;
async function loadImage() {
var url = "http://.../image.png";
blob = await makeRequest("GET", url);
console.log("blob: ", blob);
console.log("blob size: ", blob.size);
console.log("blob type: ", blob.type);
console.log("createObjectURL: ", URL.createObjectURL(blob));
blobUrl = URL.createObjectURL(blob);
console.log("blobUrl: ", blobUrl);
getImageData(blob);
document.querySelector('#my_image').src = URL.createObjectURL(blob);
}
function makeRequest(method, url) {
return new Promise(function (resolve, reject) {
let xhr = new XMLHttpRequest();
xhr.open(method, url,true);
xhr.responseType="blob"
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
resolve(xhr.response);
} else {
reject({
status: this.status,
statusText: xhr.statusText
});
}
};
xhr.onerror = function () {
reject({
status: this.status,
statusText: xhr.statusText
});
};
xhr.send();
});
}
var imageData;
getImageData = async function(blob){
const bitmap = await createImageBitmap(blob);
const [width, height] = [bitmap.width, bitmap.height];
var newCanvas = document.getElementById('my_canvas');
var ctx = newCanvas.getContext('2d');
//ctx.drawImage(bitmap, width, height);
console.log("bitmap: ", bitmap);
//ImageData Object
imageData = ctx.createImageData(width, height);
console.log("imageData: ", imageData);
}
</script>
</body>
</html>