index.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <script src="../script/jquery.min.js"></script>
  8. <script src="../script/ao_module.js"></script>
  9. <title>Paint</title>
  10. </head>
  11. <body>
  12. <script src="./js/painterro-1.2.66.min.js"></script>
  13. <script>
  14. var saveFilename = "";
  15. var saveFilepath = "";
  16. var savePendingBlob = null;
  17. //Initiate the Painterro Object
  18. var painterroObject = Painterro({
  19. onClose: function(){
  20. ao_module_close();
  21. },
  22. saveHandler: function(drawing, callback){
  23. //window.open(drawing.asDataURL());
  24. var blob = drawing.asBlob();
  25. if (saveFilepath == ""){
  26. //Popup file save selector
  27. savePendingBlob = blob;
  28. ao_module_openFileSelector(fileSelected, "user:/Desktop", "new" ,false,{
  29. defaultName: "Untitled.png",
  30. });
  31. callback();
  32. }else{
  33. //Convert the image to file
  34. var imageFile = ao_module_utils.blobToFile(blob, saveFilename);
  35. //Write to source
  36. ao_module_uploadFile(imageFile, saveFilepath, function(){
  37. callback();
  38. });
  39. }
  40. console.log(drawing);
  41. }
  42. });
  43. function fileSelected(filedata){
  44. for (var i=0; i < filedata.length; i++){
  45. var filename = filedata[i].filename;
  46. var filepath = filedata[i].filepath;
  47. //Save the temp blob to there
  48. if (savePendingBlob != null){
  49. //Extract filepath dirname
  50. saveFilepath = filepath;
  51. saveFilepath = saveFilepath.split("/");
  52. saveFilepath.pop();
  53. saveFilepath = saveFilepath.join("/");
  54. saveFilename = filename;
  55. //Convert the save pending blob to
  56. let imageFile = ao_module_utils.blobToFile(savePendingBlob, filename);
  57. //Save to server
  58. ao_module_uploadFile(imageFile, saveFilepath, function(){
  59. //Reset the savePendingFile
  60. savePendingBlob = null;
  61. });
  62. }
  63. }
  64. }
  65. //Check if there are any file loading from ao_module
  66. var inputFiles = ao_module_loadInputFiles();
  67. if (inputFiles == null){
  68. //Nothing is loaded. Use blank canvas
  69. painterroObject.show()
  70. }else{
  71. //Something is loaded. Use the first image to load
  72. var openingFile = inputFiles[0];
  73. var filename = openingFile.filename;
  74. saveFilename = filename;
  75. //Filter out the filepath to get its parent dir
  76. var filepath = openingFile.filepath;
  77. saveFilepath = filepath;
  78. saveFilepath = saveFilepath.split("/");
  79. saveFilepath.pop();
  80. saveFilepath = saveFilepath.join("/");
  81. painterroObject.show("../media?file=" + filepath);
  82. }
  83. </script>
  84. </body>
  85. </html>