|
@@ -4,22 +4,93 @@
|
|
<meta charset="UTF-8">
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
- <link rel="stylesheet" href="style.css">
|
|
|
|
<script src="../script/jquery.min.js"></script>
|
|
<script src="../script/jquery.min.js"></script>
|
|
<script src="../script/ao_module.js"></script>
|
|
<script src="../script/ao_module.js"></script>
|
|
<title>Paint</title>
|
|
<title>Paint</title>
|
|
</head>
|
|
</head>
|
|
<body>
|
|
<body>
|
|
- <canvas id="canvas"></canvas>
|
|
|
|
- <div class="nav">
|
|
|
|
- <div class="clr" data-clr="#000"></div>
|
|
|
|
- <div class="clr" data-clr="#EF626C"></div>
|
|
|
|
- <div class="clr" data-clr="#fdec03"></div>
|
|
|
|
- <div class="clr" data-clr="#24d102"></div>
|
|
|
|
- <div class="clr" data-clr="#fff"></div>
|
|
|
|
- <button class="clear">clear</button>
|
|
|
|
- <button class="save">save</button>
|
|
|
|
- </div>
|
|
|
|
- <script src="main.js"></script>
|
|
|
|
|
|
+ <script src="./js/painterro-1.2.66.min.js"></script>
|
|
|
|
+ <script>
|
|
|
|
+ var saveFilename = "";
|
|
|
|
+ var saveFilepath = "";
|
|
|
|
+ var savePendingBlob = null;
|
|
|
|
+ //Initiate the Painterro Object
|
|
|
|
+ var painterroObject = Painterro({
|
|
|
|
+ onClose: function(){
|
|
|
|
+ ao_module_close();
|
|
|
|
+ },
|
|
|
|
+ saveHandler: function(drawing, callback){
|
|
|
|
+ //window.open(drawing.asDataURL());
|
|
|
|
+ var blob = drawing.asBlob();
|
|
|
|
+ if (saveFilepath == ""){
|
|
|
|
+ //Popup file save selector
|
|
|
|
+ savePendingBlob = blob;
|
|
|
|
+ ao_module_openFileSelector(fileSelected, "user:/Desktop", "new" ,false,{
|
|
|
|
+ defaultName: "Untitled.png",
|
|
|
|
+ });
|
|
|
|
+ callback();
|
|
|
|
+ }else{
|
|
|
|
+ //Convert the image to file
|
|
|
|
+ var imageFile = ao_module_utils.blobToFile(blob, saveFilename);
|
|
|
|
+ //Write to source
|
|
|
|
+ ao_module_uploadFile(imageFile, saveFilepath, function(){
|
|
|
|
+ callback();
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ console.log(drawing);
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ function fileSelected(filedata){
|
|
|
|
+ for (var i=0; i < filedata.length; i++){
|
|
|
|
+ var filename = filedata[i].filename;
|
|
|
|
+ var filepath = filedata[i].filepath;
|
|
|
|
+ //Save the temp blob to there
|
|
|
|
+ if (savePendingBlob != null){
|
|
|
|
+ //Extract filepath dirname
|
|
|
|
+ saveFilepath = filepath;
|
|
|
|
+ saveFilepath = saveFilepath.split("/");
|
|
|
|
+ saveFilepath.pop();
|
|
|
|
+ saveFilepath = saveFilepath.join("/");
|
|
|
|
+ saveFilename = filename;
|
|
|
|
+
|
|
|
|
+ //Convert the save pending blob to
|
|
|
|
+ let imageFile = ao_module_utils.blobToFile(savePendingBlob, filename);
|
|
|
|
+ //Save to server
|
|
|
|
+ ao_module_uploadFile(imageFile, saveFilepath, function(){
|
|
|
|
+ //Reset the savePendingFile
|
|
|
|
+ savePendingBlob = null;
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ //Check if there are any file loading from ao_module
|
|
|
|
+ var inputFiles = ao_module_loadInputFiles();
|
|
|
|
+ if (inputFiles == null){
|
|
|
|
+ //Nothing is loaded. Use blank canvas
|
|
|
|
+ painterroObject.show()
|
|
|
|
+ }else{
|
|
|
|
+ //Something is loaded. Use the first image to load
|
|
|
|
+ var openingFile = inputFiles[0];
|
|
|
|
+ var filename = openingFile.filename;
|
|
|
|
+ saveFilename = filename;
|
|
|
|
+
|
|
|
|
+ //Filter out the filepath to get its parent dir
|
|
|
|
+ var filepath = openingFile.filepath;
|
|
|
|
+ saveFilepath = filepath;
|
|
|
|
+ saveFilepath = saveFilepath.split("/");
|
|
|
|
+ saveFilepath.pop();
|
|
|
|
+ saveFilepath = saveFilepath.join("/");
|
|
|
|
+
|
|
|
|
+ painterroObject.show("../media?file=" + filepath);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ </script>
|
|
</body>
|
|
</body>
|
|
</html>
|
|
</html>
|