Hay preguntas similares, pero todas las respuestas usan lienzo. Será lento y creo que no es natural .
Busqué y parecía que puedo usar XMLHttpRequest . Pero probé todos los ejemplos y fallé (aunque obtuve algunos datos, no pudieron formar 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?EDITAR: Me repetiré de nuevo: sin lienzo
<!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>