-1

I'm running my processingjs sketch locally and I'm trying to save a PNG of my canvas but I can't get the regular commands saveCanvas("image", 'jpg'); and save("diagonal.tif"); to work.

Does anyone have a tip on how to get this done?

Cheers, Thales

Thales Ribeiro
  • 49
  • 1
  • 10

1 Answers1

0

Questions like these are best answered by looking in the reference.

Take a look at the documentation for save() and saveFrame(). I'm not sure where saveCanvas() is coming from, but I don't see it in the Processing.js reference. Are you thinking of P5.js?

Anyway, the documentation says:

These files are saved to the sketch's folder, which may be opened by selecting "Show sketch folder" from the "Sketch" menu.

This makes me suspicious that these were only designed to be used from the Processing editor.

Take a look in your developer tools to check the JavaScript console for errors. What do you see when you try to call the save() or saveFrame() functions?

I'd also recommend googling "processing.js save image" for a ton of results, including:

If you still can't get it working, please link to a CodePen or JSFiddle with a simplified MCVE that demonstrates the problem.

Kevin Workman
  • 41,537
  • 9
  • 68
  • 107
  • Exactly, those commands work from the Processing editor. My issue is on how to get this to work from the browser running ProcessingJS. – Thales Ribeiro Aug 08 '18 at 17:56
  • @ThalesRibeiro What do the developer tools say when you try? Can you please post a CodePen? – Kevin Workman Aug 08 '18 at 17:57
  • @ThalesRibeiro Sorry, but that's not really a [mcve]. [Here](https://codepen.io/anon/pen/RBqGRy) is a MCVE. Please run this and check out the developer tools. You'll get an error about "Not allowed to navigate top frame to data URL" and if you google that error, you'll see that Chrome recently blocked this ability. You might try it in a different browser or you might try another workaround, but I'm not sure this is possible anymore. Keep in mind that Processing.js is no longer maintained, so you might be best off switching to Processing or P5.js. – Kevin Workman Aug 08 '18 at 18:16
  • Yea, I was hoping for some kind of solution for this. Seen some examples but couldn't get them to work with my code. – Thales Ribeiro Aug 08 '18 at 18:57
  • @ThalesRibeiro Take a look at [this post](https://stackoverflow.com/q/14805198/873165). You can call `canvas.toDataURL("image/png")` to get an encoded image string. Then you should be able to do whatever you want with that string, including save it to a file. – Kevin Workman Aug 08 '18 at 19:04