P5.js: save() to a remote Location?

[davidhbigelow]

Is there a way to save a canvas image to someplace other than a local file?

LIke post it to a remote location like AWS S3?

Or capture the data to a local variable that could then be posted to an HTTP server for saving remotely?

[bmoren]

Hi @davidhbigelow ! Your question is more related to how to do something specific with the library, not an issue with the library itself. These issues are only for instances where there is a bug or feature request for the library itself. (more info here) Questions related to using the library should be carried out in the community via the processing forum here: https://discourse.processing.org/c/p5js

Unless you are trying to open discussion of implementing a new feature into the save() function related to server uploads, I'd suggest moving your conversation over there. One topic of interest might be this one: https://discourse.processing.org/t/uploading-recorded-audio-to-web-server-node-js-express/4569/4 The idea is super similar, but for an image instead of a sound file.

[davidhbigelow]

Actually - this is not just a question but a suggestion. It appears that the only current option is to save locally.

However, I have done some testing and found that a p5js canvas could be extracted via a toDataURL() request.

In our implementation, this is preferred. But not perfect in that the image data is returned as a base64 stream.

Here is what I did to get this basically working:

<div id="drawingCanvas"></div>
<script>
  var canvas = function(p) {
    p.setup = function(){
      p.createCanvas(100, 100);
      p.background(0);
    }
  };
  new p5(canvas, 'drawingCanvas');
  </script>

<script>
function canvasToBase64 () {
    var c = $('#drawingCanvas').find('canvas'); // using jQuery
    var imageData = c[0].toDataURL('image/png'); // produces a base64 image string
    // send imageData to server.....
}
<script>

I guess that the final conversion to a png/jpg/whatever... needs to be a server side conversion after the datastream is sent.