Javascript Canvas get data from image and display it

Question

I've no idea why this doesn't work. The src attribute of the image is changed with the new data, but the image is not actually visible. I tried with several different images. It's just javascript in a browser and Jquery is required.

<body>
<img src="" id="test">
</body>
<script>
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    let img = new Image();
    img.onload = getIt
    img.src = 'download.png';

    function getIt() {      
        canvas.width = this.width;
        canvas.height = this.height;
        const imageData = ctx.getImageData(0, 0, this.width, this.height);
        ctx.drawImage(this, canvas.width , canvas.height);
        ctx.putImageData(imageData, canvas.width, canvas.height);

        $('#test').get(0).src = canvas.toDataURL("image/png");
    }

</script>

I tried with several different images, all png. At the moment this is the entire code for the project so I don't foresee anything that could be interfering with it.

The result is this but the image cannot be seen:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAeCAYAAAAhDE4sAAAAMklEQVRIS+3SsQ0A....etc" id="test">

EDIT: It seems like it might be getting the data from the image incorrectly but I've no idea why...I mean why would it get the data but be incomplete or incorrect?

I suppose the problem is that getIt gets never called as it is set as an event handler on an empty Image which therefore never calls onload. Could you, please, provide more detail on what are you trying to achieve by this code? — Mikulas, Jun 08 '19 at 17:09
@Mikulas The getIt function must be called or otherwise the src attribute would not be updated with the image data. What I'm trying to achieve is explained in the title, to display an image directly from the image data using canvas. — Hasen, Jun 08 '19 at 17:29
Two questions, Are you running the code from http:// something or file:///something? and if you make the canvas visible on the html page is the image there? — Wayne, Jun 08 '19 at 18:06
I agree getit is running, a transparent canvas will toDataURL resulting in a transparent image. suggesting that the image failed to load prehaps with an error code after a time out? — Wayne, Jun 08 '19 at 18:09
Also note the default canvas width is set by the css or the canvas element in the html, I'm not sure what the default width for a document.createElement("canvas") will be? this.width may be a undefined. — Wayne, Jun 08 '19 at 18:18
@Wayne Thanks for your comments. It's running from mamp. I checked and the width is not undefined, it is the correct width within the getIt function. If I check the image in developer tools it appears to have the correct width and height too but cannot actually be seen. I also tried with various different images to no avail. I even tried a jpg and thus changed the dataurl conversion of course to `image/jpg` but it still got the image data as a png? It really seems fundamentally unable to get the correct data from the images...no idea why. — Hasen, Jun 09 '19 at 04:22

enxaneta · Accepted Answer · 2019-06-08T18:48:30.877

1

Please try this: (You don't need to get or put the image data)

Also you were doing this:ctx.putImageData(imageData, canvas.width, canvas.height);. This means that you are drawing the image totally outside the canvas. Do this instead: ctx.putImageData(imageData, 0,0);

const canvas = document.createElement("canvas");

    const ctx = canvas.getContext("2d");
    let img = new Image();
    img.onload = getIt
    img.src = "download.png";

    function getIt() {    
        canvas.width = this.width;
        canvas.height = this.height;
        //draw the image onto the canvas
        ctx.drawImage(this, 0,0);
        //use the data uri 
        test.src = canvas.toDataURL("image/png");
    }

<img src="" id="test">

edited Jun 08 '19 at 18:48

answered Jun 08 '19 at 18:43

enxaneta

31,608
5
29
42

Aha! Yes that solves it, there was me thinking the putimagedata was important since we needed the dataurl after all but all along the drawimage was more vital. I don't quite understand the test.src though...it seems to be an undefined variable? It automatically refers to an image with a tag of the same name or what? – Hasen Jun 09 '19 at 05:01
Element IDs become properties of window. But if you want you can use `dicument,getElementById("test")` instead – enxaneta Jun 09 '19 at 05:16

Javascript Canvas get data from image and display it

1 Answers1