index.html 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  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. <style>
  11. body{
  12. background-color: #999999;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <script src="./js/painterro-1.2.66.min.js"></script>
  18. <script>
  19. var saveFilename = "";
  20. var saveFilepath = "";
  21. var savePendingBlob = null;
  22. //Initiate the Painterro Object
  23. var painterroObject = Painterro({
  24. onClose: function(){
  25. ao_module_close();
  26. },
  27. saveHandler: function(drawing, callback){
  28. //window.open(drawing.asDataURL());
  29. var blob = drawing.asBlob();
  30. if (saveFilepath == ""){
  31. //Popup file save selector
  32. savePendingBlob = blob;
  33. ao_module_openFileSelector(fileSelected, "user:/Desktop", "new" ,false,{
  34. defaultName: "Untitled.png",
  35. });
  36. callback();
  37. }else{
  38. //Convert the image to file
  39. var imageFile = ao_module_utils.blobToFile(blob, saveFilename);
  40. //Write to source
  41. ao_module_uploadFile(imageFile, saveFilepath, function(){
  42. callback();
  43. });
  44. }
  45. console.log(drawing);
  46. }
  47. });
  48. function fileSelected(filedata){
  49. for (var i=0; i < filedata.length; i++){
  50. var filename = filedata[i].filename;
  51. var filepath = filedata[i].filepath;
  52. //Save the temp blob to there
  53. if (savePendingBlob != null){
  54. //Extract filepath dirname
  55. saveFilepath = filepath;
  56. saveFilepath = saveFilepath.split("/");
  57. saveFilepath.pop();
  58. saveFilepath = saveFilepath.join("/");
  59. saveFilename = filename;
  60. ao_module_setWindowTitle("Paint - " + saveFilename);
  61. //Convert the save pending blob to
  62. let imageFile = ao_module_utils.blobToFile(savePendingBlob, filename);
  63. //Save to server
  64. ao_module_uploadFile(imageFile, saveFilepath, function(){
  65. //Reset the savePendingFile
  66. savePendingBlob = null;
  67. });
  68. }
  69. }
  70. }
  71. //Check if there are any file loading from ao_module
  72. var inputFiles = ao_module_loadInputFiles();
  73. if (inputFiles == null){
  74. //Nothing is loaded. Use blank canvas
  75. painterroObject.show()
  76. }else{
  77. //Something is loaded. Use the first image to load
  78. var openingFile = inputFiles[0];
  79. var filename = openingFile.filename;
  80. saveFilename = filename;
  81. ao_module_setWindowTitle("Paint - " + saveFilename);
  82. //Filter out the filepath to get its parent dir
  83. var filepath = openingFile.filepath;
  84. saveFilepath = filepath;
  85. saveFilepath = saveFilepath.split("/");
  86. saveFilepath.pop();
  87. saveFilepath = saveFilepath.join("/");
  88. painterroObject.show("../media?file=" + filepath);
  89. }
  90. </script>
  91. </body>
  92. </html>