Get ImageData from imgurl using xmlhttprequest

user_17059351 0
Viewed 105

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

image javascript
1 Answers
<!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>
user_83916490
Related