If i needed to save the p5 canvas as an image file to somewhere on the webserver, and then have the next page pick it up and display it as a standard html image? How would I do this? I’m assuming i need to use PHP or something to save the variable, but how would i get the p5 image exported to the server in the first place? While also keeping the saved file name/location as a variable that can be accessed from a PHP script or the next HTML page etc.
I believe there is no “easiest” way for this - it depends on your skill set and your needs. Usually I go for node.js because I can use javascript - and there are some libraries for uploading files easily
But how would i save the p5 canvas in the first place? and then wouldnt PHP be easier to work with to get the file there? Im not sure how it works with p5.
hmm I hope I made my point clear that there is no one “easiest” way to do it. PHP was the “mainstream” but the downside is (if I understand correctly) you need to set up a server globally. node.js may be quicker as you can run it standalone (still you need to install node.js/npm globally) and set up apache or nginx for reverse proxy only when you need to expose to the internet. You can use services such as repl.it or glitch.com for quick development online, and this is why I usually recommend node.js. But again, if you already have experience in PHP, why not use PHP?
For retrieving canvas data, you can create a “blob” with this function: HTMLCanvasElement.toBlob() - Web APIs | MDN
and then send it to the server with POST: Using Fetch - Web APIs | MDN
or websocket etc. depending on how the server is listening. I found websocket is easier because basically you can send whatever you want. You can search for examples on glitch - for example: Glitch
1 Like
Thanks, ill look into that and do some testing. The main reason for me thinking about using PHP is that the website is already going to have php to do things, for instance file upload to server (user can upload file to location on server) (i used html5 forms and php).
yes then you should have asked that way… and I am not against PHP at all. I guess in that case you should check out how to send the data by POST and not with websocket. After getting a blob, you need something like this, but it will be definitely outside what p5.js offers
1 Like
Ahh yes sorry my bad for not making it clear. Thanks now I know what to research into I can learn about PHP “blob” and should be able to make it after a bit of learning…
by the way blob is like a “virtual” file - if you can handle image file upload on PHP, uploading blob should work the same way.