I created a canvas and letting user draw many shapes (circle, rectangle etc). I'm storing information of each shape (x, y, w, h, r) in objects and storing them in an array! Now i have an array of all the shapes with all required information to redraw them. What i want is, when user clicks 'save' button, HTML code of the drawn shapes gets saved in an HTML file! I just need to create a .html file and write all the code for drawn shapes in that (hard-coded, in a canvas ofcourse). I've been looking for a method to create new files within JavaScript and write into them.. I thought it's going to be as simple as file reading writing in Java but i am unable to find any easy way to do that... as there are some permission issues and stuff like that! Kindly tell me what to do?
-
1You'll have to use some serverside language to write files.. try posting the array to PHP (or any other serverside lang) then writing the file using [`fwrite()`](http://php.net/manual/en/function.fwrite.php) – Yotam Omer Oct 29 '13 at 14:26
-
2Or HTML5 FileApi compatible browser http://caniuse.com/#feat=fileapi – Yury Tarabanko Oct 29 '13 at 14:28
-
Are you trying to save this on the server or the client? – Nicolai Oct 29 '13 at 14:29
-
Client side... all the shapes user will draw, will be saved in the client machine as a webpage! – Abdul Jabbar Oct 29 '13 at 14:32
-
I've found that [link](http://stackoverflow.com/questions/13405129/javascript-create-and-save-file) who will probably help you. – MokaT Oct 29 '13 at 14:32
-
1Check this: https://github.com/eligrey/FileSaver.js/ – Yury Tarabanko Oct 29 '13 at 14:34
3 Answers
The first line of the page about Javascript on Wikipedia (http://en.wikipedia.org/wiki/JavaScript) is about your issue.
JavaScript is an interpreted computer programming language. As part of web browsers, implementations allow client-side scripts to interact with the user.
You can't create, open, remove, write or edit file with Javascript on the client-side.
- 245
- 1
- 4
- 9
Barring the use of HTML5, which isn't fully supported yet, you'll want to post the data to the server and then have the user download the file.
For example, you could convert your array to JSON, place the JSON inside a TextArea tag wrapped inside an HTML form, and then submit the form. The page on the server that receives the form posting could respond my downloading a file to the user's browser.
If you tell us a little bit more about what you want to accomplish, we might be able to provide better answers. Do you want to create HTML so that the data can be viewed in the browser? If so, then you can manipulate the existing document in JavaScript. Are you looking to have users save their data and submit it to you for review? If so, a SQL database might be more appropriate.
- 31,198
- 62
- 198
- 313
-
ok. well, currently i'm server and im client and i dont want to go in to server side languages like PHP etc. What i want to do is. When user presses the save button after drawing on canvas.. An html file gets created on the user machine which will contain not only the html code, but also all the javascript... canvas code to just give the static view in a browser of all the shapes user has drawn.. – Abdul Jabbar Oct 29 '13 at 14:36
If you are on local and on windows, you can use FileSysemObject ActiveX, but I don't think it's you are looking for.
- 1,416
- 16
- 37
-
I'm simply looking to save the contents of the canvas in a separate html file after user clicks save button. – Abdul Jabbar Oct 29 '13 at 14:42