0

Is there a way to download a canvas image to a file folder without a prompt showing up? I have found solutions requiring a prompt where you name the file, but I have not found any solutions where you can dynamically name the image and save to a local file. I am very new to front-end development, so I am not entirely familiar with Node.js or JQuery/PHP/Ajax. I have found solutions using these but they have ended up still using prompts.

Hmkyriacou
  • 64
  • 1
  • 8
  • Any code on the front-end (that runs in the browser) doesn't have the ability to save any files. To make any changes to a file system, you'd have to use server-side back-end code like PHP or Node.js. Even then, you can only affect the file system on your own server where your back-end code is running. If you want to trigger a download on the front-end, I believe you could redirect the client to the URL where the image is hosted, but I don't think this would be an ideal solution. If you give more details describing what your app should do, I might be able to suggest a solution. – georgedum Jun 04 '20 at 18:02
  • @georgedum thanks, I have a canvas game with moving images and I want to download an image of the canvas every second or so. My goal is to use the images to train a neural network, but I am stuck on accessing the image without needing to constantly click "save" – Hmkyriacou Jun 04 '20 at 18:10
  • Did you make the canvas game? If that's the case, I think you could send the contents of the canvas to the backend and save the images there. If it's not your game, maybe you could screen capture a video of your play session and then use the frames from the video file? – georgedum Jun 04 '20 at 18:19
  • Yes I made the game in vanilla JS. I also need to output the coordinates of the images on the canvas with the image file, so I cannot screen record. To send the contents to the backend, would I need to transfer my javascript code to node.js? – Hmkyriacou Jun 04 '20 at 18:32
  • Oh great! You don't need to move all your js code. You just set up a separate node app, with a route. (a basic webserver) In your game code, you send a request to your node app containing whatever data you need (the image, coordinates, etc.) Then you can use node to save that data in a database or just directly to your file system. It might take some work, but that's the direction I'd go. – georgedum Jun 04 '20 at 19:35
  • @georgedum thanks again for your help, So would the node app be running the js code? Or is the node app like a standalone app and I will continue to run the js in browser as I have been doing but add a way to communicate with the node app? Would this be through a POST request? – Hmkyriacou Jun 04 '20 at 20:46
  • The node app could be completely separate or it could also serve your game. If I were doing this, I would make a little express app like this: https://expressjs.com/en/starter/hello-world.html . Then I would add a route handler for a post request. The request handler would accept data from your client javascript game, then save it. Then you could fire off a request in your game every so often with the data you want to save. If you've never made a web app that sends data back and forth to a server, it might be a little challenging, but good luck! – georgedum Jun 04 '20 at 20:54

1 Answers1

0

In general, this is a security feature.

You don't want a site you browsing to save files to your computer silently. They can possibly contain a malicious code for example, or override an existing file. Thus, as a security feature the browsers are asking you to name the file you will save.

There is a way to name the files thou, so you don't need to present the user with generic file name.

On How to do that - it really depends what are you using to do it..

In your situation - if those are log files you want to save - you can send them back to the server. That can be easily done.

Deian
  • 1,237
  • 15
  • 31
  • Is there any way to bypass that security feature temporarily just on my machine? I only need to save the images onto my specific machine. – Hmkyriacou Jun 05 '20 at 14:02
  • Not really ... kind of doesn't make sense. Try to transmit the file to the server. – Deian Jun 05 '20 at 14:44