0

I want to get html canvas image as javascript object. I looked samples from internet. But all samples are getting images from a source to canvas like this:

  <body>
    <canvas id="myCanvas" width="578" height="400"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, 69, 50);
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
    </script>
  </body>

But my problem: There is an image on canvas element that created by pencil. I want to get that image as object and post to server. But I could not get.

barteloma
  • 6,403
  • 14
  • 79
  • 173
  • The image created by pencil is the drawImage result, or something user can create afterwards? – Leonidas Jan 30 '15 at 08:14
  • 1
    possible duplicate of [How to save a HTML5 Canvas as Image on a server](http://stackoverflow.com/questions/13198131/how-to-save-a-html5-canvas-as-image-on-a-server) – mido Jan 30 '15 at 08:34

1 Answers1

0

have you tried canvas.toDataURL()?

more hardcore way might be canvas.getContext('2d').getImageData() would return ImageData object.

mido
  • 24,198
  • 15
  • 92
  • 117
  • `canvas.toDataURL` is correct. **And to give an explanation:** toDataURL will convert the canvas into a dataURL string. Unlike objects, strings are easy to transmit and save. The .toDataURL string can be sent to the server and saved in your server file system or database. A common way to send the string is to use jQuery's AJAX method to POST the string to a url on your server that knows how to save that string. – markE Jan 30 '15 at 15:50