2

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

Rratic
  • 123
  • 9
  • You specifically want an ImageData object? Or you just want to read the image's data in some other format? You'd need an image parser, currently the only "built-in" way is a canvas, not sure what you find "unnatural" in that. We are discussing adding an [ImageBitmap.getImageData])(https://github.com/whatwg/html/issues/4785) method, but it's not done yet. – Kaiido Oct 03 '21 at 04:41
  • Well, I need to do some operations . For example change the color of specific pixels before showing. – Rratic Oct 03 '21 at 04:49
  • And that is exactly one of the goals the canvas had been made for, why can't you use a canvas? – Kaiido Oct 03 '21 at 08:49
  • Because the same thing well be drawn several times (just imagine a 2d minecraft) , it'll be _very_ slow if it is done on canvas. – Rratic Oct 03 '21 at 09:01
  • No, it will be slower if done yourself ;-p if you need to prepare multiple sprites, do just that: **prepare** mutliple sprites. Whatever time is spent pn the canvas will be like nothing compared to the time spent fetching then parsing and decoding the images. – Kaiido Oct 03 '21 at 10:02
  • Drawing on canvas needs fetching, parsing and decoding too. And what if I want to change every pixel of the image, and I want to draw many times? Is it still slow? If it turns out it is, I'll try your way. – Rratic Oct 03 '21 at 10:36
  • 1
    To do pixel manipulation in the browser the canvas will be the fastest way, it has direct access to the GPU. Whatever solution you'll be using without a canvas will be stuck on the CPU. GPUs are made to do this job, the canvas is made to do this job, use a canvas. – Kaiido Oct 03 '21 at 11:00
  • now i want to rotate the img and drawimage can't do it – Rratic Oct 24 '21 at 08:58
  • of course it can... https://stackoverflow.com/questions/17411991/html5-canvas-rotate-image – Kaiido Oct 24 '21 at 10:00
  • but this affects other parts of the canvas – Rratic Oct 24 '21 at 11:43
  • no it doesn't. You can simply reset the transformation matrix after. Please go check tutorials, stop with your preconception that X can't be done, search how to do it first. – Kaiido Oct 24 '21 at 14:13
  • i tried one of the answers and failed :( maybe i tried a wrong one – Rratic Oct 24 '21 at 14:24

1 Answers1

0
<!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>
TomInCode
  • 506
  • 5
  • 11