2

I'm having a problem with retrieving the base64 version of an image displayed on a canvas. I've looked at the other questions but none of the solutions including canvas2image seem to work.

Here's my code:

<!DOCTYPE>
<html>
<head>
  <style>#canvas {cursor: pointer;}</style>
</head>
<body>
    <canvas id="canvas"></canvas>

    <script type="text/javascript">

        var can = document.getElementById('canvas');
        var ctx = can.getContext('2d');

        var img = new Image();
        img.onload = function(){
            can.width = img.width;
            can.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);
        }
        img.src = 'http://sstatic.net/stackoverflow/img/newsletter-ad.png';

        can.onclick = function() {
            ctx.translate(img.width-1, img.height-1);
            ctx.rotate(Math.PI);
            ctx.drawImage(img, 0, 0, img.width, img.height);
        };

   document.write(can.toDataURL()); //isn't writing the correct base64 image


    </script>
</body>
</html>

Here's the test link: http://jsfiddle.net/mrchief/hgTdM/1/ thanks, Mrchief

What I need is the correct base64 output of the image in the canvas.

The problem is that it won't output the correct base64 version of the image.. But as you can see, the image inside the canvas is displayed without any problems.

I've tested it on chrome & firefox

Thanks very much..

7
  • Well, what is being output then?
    – Pekka
    Commented Aug 17, 2011 at 20:59
  • 2
    Works fine for me in Chrome & FF5: jsfiddle.net/mrchief/hgTdM/1
    – Mrchief
    Commented Aug 17, 2011 at 21:00
  • Works fine in IE9 and Firefox 6.
    – Caimen
    Commented Aug 17, 2011 at 21:03
  • Caimen, did you try viewing the outputted base64 image in your browser. It doesn't show the same image.
    – blmic
    Commented Aug 17, 2011 at 21:07
  • @Pekka, its outputting base64 of a blank image with a different size
    – blmic
    Commented Aug 17, 2011 at 21:07

1 Answer 1

2

Your document.write() call occurs immediately upon page load, before your img is loaded and drawn and before your onclick handler can ever run. You need to wait to generate the data URI until after everything has finished happening to the canvas.

Ignoring the onclick, here's something that writes out the data url after the image has loaded and been drawn to the canvas in a rotated fashion:

<!DOCTYPE html>
<html><head>
  <title>Rotated Image Data URL</title>
  <style type="text/css" media="screen">
    canvas, textarea { display:block }
  </style>
</head><body>
  <canvas id="canvas"></canvas>
  <textarea id="data" rows="20" cols="80"></textarea>
  <img id="echo"> 
  <script type="text/javascript">
      var can = document.getElementById('canvas');
      var ctx = can.getContext('2d');

      var img = new Image();
      img.onload = function(){
        can.width  = img.width;
        can.height = img.height;
        ctx.translate(img.width-1, img.height-1);
        ctx.rotate(Math.PI);
        ctx.drawImage(img, 0, 0, img.width, img.height);
        var url = document.getElementById('data').value = can.toDataURL();
        document.getElementById('echo').src = url;
      }
      img.src = 'gkhead.jpg';
  </script>
</body></html>

You can see this demo in action here: http://phrogz.net/tmp/upside-down-image-url.html

Note that the image you load must be on the same domain as your script, or else you will not be allowed to create the data URL.

1
  • Thanks phrogz. The problem was that the image was on a different domain. I had to use php to solve that.
    – blmic
    Commented Aug 19, 2011 at 0:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.