› ›

Saving the p5.js canvas as an image on my server

jiniejjiniej
in p5.js Programming Questions

Hi all, I am trying to create a project in which the user draws something in the p5 canvas (say there is some image and it is drawn at mouse X and Y, and I just don't redraw the background) then presses a save button. I don't want the save button to prompt a download for the user, but instead save the file to my server. I host with godaddy if that matters.

I have done some searching, I am still not sure how to go about this. I thought I would be able to do it just from p5, but now I dont think so. What I think I do need to do is run something written in node.js that waits for a message from my p5 program, receives the message, and sends a save request back to p5, p5 will then send its data, perhaps in the form of the pixels[] array and node.js will save it? Not sure..... if any of you could point me in the right direction it would be much appreciated, thank you!

Tagged:

Answers

  • blindfishblindfish

    You should be able to submit it to your server via a POST request (I searched 'submit image via POST'). The trick then is having something running on your server that can digest this and save the image file; and that's going to be dependent on your hosting package and what server-side language you have access to...

    Bear in mind that image files are relatively large; so if you make this easily available to all comers you could quite quickly fill up your storage quota.

  • _vk_vk
    edited May 2015

    Maybe this library can be a start point:

    http://libraries.seltar.org/postToWeb/

    Don't know though how it will work with p5.js...

    Another cool thing would be to instead of saving the image, save the series of "commands" that user has used to make the image, and on request, redraw them. Like save all strokes coordinates, colour changes and etc. This way data would be minimum.

  • blindfishblindfish

    @_vk: that appears to be a Processing library so unlikely to work in a JavaScript environment. The PHP code might still be useful though, if you can submit in the format it digests. Submitting the image file to the server looks relatively trivial if done via POST. It's how that gets processed that may be more fiddly...

    Storing commands is indeed another interesting approach, but I don't agree that this would necessarily minimise data: depends on how long someone is drawing for... I also think it would be far more complex to implement :/

  • wasdswagwasdswag
    edited August 2017

    i'm newbie at js and p5.js as well, but i've tried to solve exactly same problem recently. after a lot of googling and unsuccessful attempts with phantomjs, i stopped on html2canvas.js and it's works simple and just fine. here is my code:

    HTML:

    <html> <head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.11/p5.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.11/addons/p5.dom.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="html2canvas.js" type="text/javascript"></script>></script>
<script src="sketch.js"></script>
</head></html>`

    p5.js Sketch:

    var index = 1;
function setup(){
createCanvas(700, 700); 
}
function draw(){
//draw something
}
function keyPressed(){
makeScreenshot();
}
function makeScreenshot(){
var canvas = $('canvas')[0];
var data = canvas.toDataURL('image/png').replace(/data:image\/png;base64,/, '');

// make names  eg "img_1.png", "img_2.png"......etc"
var iname = 'img_' + index + '.png'; 

$('canvas').remove();
//post to php
$.post('save.php',{data: data, iname });
// update counter
index++;
//restart sketch
setup();
            }

    PHP (save.php) :

    <?php
   $name = ($_POST['iname']);
   file_put_contents($name, base64_decode($_POST['data'] ));
   echo( $name );
?>

    so you need 4 file to upload on server to make it works: html2canvas.js , HTML, sketch.js and save.php

    by some reasons POST method doesn't works on my mac localserver, it returns "error 405", but when i upload it on my webhost its all works great.

    hope this can helps to someone looking this theme

Sign In or Register to comment.