Exporting canvas to png file through Ajax

70 views
Skip to first unread message

David Staschover

unread,
Dec 12, 2018, 9:50:15 PM12/12/18
to Literally Canvas
Hi,

Literally Canvas is amazing! Thank you!

I am trying to take a canvas and export it as a png file as a variable as an ajax post. I am able to export the JSON data, but I haven't figured out how to send an image.
I'm not sure if it matters, but the Ajax program is written in perl.

Below is my script so far. What do I need to do to get the png data exported? Also, if someone knows Perl, can an example be provided? Otherwise, php? In perl, I usually do:

open (OUTFILE,">file.png");
while ($bytesread=read($image,$buffer,1024))
{
  print OUTFILE $buffer;
}
close (OUTFILE);


Thanks


<html>
  <head>
    <!-- stylesheet -->
    <link href="css/literallycanvas.css" rel="stylesheet">
    <!-- dependency: React.js -->
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- Literally Canvas -->
    <script src="js/literallycanvas.js"></script>
  </head>
  <body>
  <a class="save"><button>SAVE</button></a>
  <div class="my-drawing"></div>
  <script>
  $(document).ready(function() {
    var lc = LC.init(
      document.getElementsByClassName('my-drawing')[0]);
      $('.save').on('click', () => {
        json_data=JSON.stringify(lc.getSnapshot());
      $.post( 'ajax.cgi', {"jsondata":json_data},  function(data) { alert(data);}  );
     });
  });
  </script>
  </body>
</html>

Steve Landey (Johnson)

unread,
Dec 12, 2018, 9:54:10 PM12/12/18
to literal...@googlegroups.com
You need to save them as base64. There is an example addressing this exact case in the docs: http://literallycanvas.com/examples/imgur.html
--
You received this message because you are subscribed to the Google Groups "Literally Canvas" group.
To unsubscribe from this group and stop receiving emails from it, send an email to literallycanv...@googlegroups.com.
To post to this group, send email to literal...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

David Staschover

unread,
Dec 12, 2018, 11:14:42 PM12/12/18
to Literally Canvas
Thank you! I was looking at that but needed to fix some stuff on the ajax side

Reply all
Reply to author
Forward
0 new messages