Get base64 data of image inside a canvas

Question

I know this question is asked man times but my problem is this. I want to get data of image inside a canvas and get that! But when I change the image resource derived data does not change. In an other words it doesn't matter what image I use in my code. For best understanding my question my code is below.

<!DOCTYPE html>
<html>
    <body>

        <canvas id="viewport" style="border:1px solid #d3d3d3;"></canvas>

        <script>
            var canvas = document.getElementById('viewport'),
            context = canvas.getContext('2d');

            make_base();

            function make_base()
            {
              base_image = new Image();
              base_image.src = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';
              base_image.onload = function(){
                context.drawImage(base_image, 0, 0);
              }
            }


            const base64Canvas = canvas.toDataURL("image/jpeg").split(';base64,')[1];
            document.write('<br>');
            document.write(base64Canvas);

        </script>

    </body>
</html>

I the code above it does not matter what picture to use. The base64 data is same or every one. Any help?

JavaScript uses an async network call to load an image; so you need to wait for that call to finish before you try to collect the image info — Derek Pollard, Sep 23 '22 at 20:35
Does this answer your question? [Download image after load it in Canvas](https://stackoverflow.com/questions/71714369/download-image-after-load-it-in-canvas) — gre_gor, Sep 23 '22 at 21:35

IT goldman · Answer 1 · 2022-09-23T21:15:33.950

0

you should capture the image after it has been loaded and drawn. this is asynchronous action so:

Update: please use an image locally or from an origin that allows CORS.

<!DOCTYPE html>
<html>

<body>

  <canvas id="viewport" style="border:1px solid #d3d3d3;"></canvas>

  <script>
    var canvas = document.getElementById('viewport'),
      context = canvas.getContext('2d');

    make_base();

    function make_base() {
      base_image = new Image();

      base_image.onload = function() {
        context.drawImage(base_image, 0, 0);

        const base64Canvas = canvas.toDataURL("image/jpeg").split(';base64,')[1];
        console.log(base64Canvas);
      }
      base_image.crossOrigin = "anonymous"

      base_image.src = 'https://picsum.photos/200';

    }
  </script>

</body>

</html>

edited Sep 23 '22 at 21:15

answered Sep 23 '22 at 20:32

IT goldman

14,885
2
14
28

@goldman I could not properly understand your answer! What should I do what should I change? – Saeed Eisakhani Sep 23 '22 at 20:38
I have moved the saving part into the `onload` part so that image would load first – IT goldman Sep 23 '22 at 20:40
BUT this does not show any string for me on the screen! This just shows the image. I am referring to ```document.write(base64Canvas); ``` – Saeed Eisakhani Sep 23 '22 at 20:51
this example won't work here because of cross domain issues. – IT goldman Sep 23 '22 at 20:52
@goldman I ran your edition in browser in Firefox it just shows image. – Saeed Eisakhani Sep 23 '22 at 21:01
that depends where the image is I guess. now example works – IT goldman Sep 23 '22 at 21:16
@goldman Is it possible to exert an if() condition to QUESTIONS ORIGINAL script so that it execute ```toDataURL()``` after image is completely drawn in canvas? I am waiting for your answer. tnx – Saeed Eisakhani Sep 25 '22 at 12:38
you can't exert if() or return value immediately because it is unknown how much time takes for the image to load. it is **asynchronous** so you only get to know after it loads, if you set `onload` of the image to a function of your choosing. it is on that function you add your logic. – IT goldman Sep 25 '22 at 13:09

Get base64 data of image inside a canvas

1 Answers1