imgPaste.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>ImagePaste</title>
  5. <meta charset="utf-8">
  6. <link rel="icon" type="image/png" href="./img/ImagePaste.png">
  7. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  8. <style>
  9. body {
  10. font-family: Monospace;
  11. background-color: #f5f5f5;
  12. margin: 0px;
  13. }
  14. #pasteInstructin{
  15. font-size: 2em;
  16. position: absolute;
  17. bottom: 0.3em;
  18. right: 1em;
  19. pointer-events: none;
  20. color: #adadad;
  21. }
  22. #preview{
  23. max-width: 100%;
  24. max-height: 50vh;
  25. }
  26. </style>
  27. <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
  28. <script src="../../script/jquery.min.js"></script>
  29. <script src="../../script/semantic/semantic.min.js"></script>
  30. <script src="../../script/ao_module.js"></script>
  31. </head>
  32. <body>
  33. <br>
  34. <div class="ui container">
  35. <p id="instruction">Copy an image from somewhere else and press Ctrl+V in the box below to save it in this Server</p>
  36. <div class="ui basic message" style="height: 60vh;">
  37. <div style="width: 100%;" align="center">
  38. <img id="preview" src=""></img>
  39. </div>
  40. <p id="pasteInstructin">Ctrl + V</p>
  41. </div>
  42. <button class="ui mini basic green button pasteOnly" onclick="uploadImageToTarget();">Upload</button>
  43. <div class="ui checkbox pasteOnly" style="margin-left: 1em;">
  44. <input type="checkbox" id="uploadOnPaste" onchange="toggleUploadOnPaste(this.checked);">
  45. <label>Upload on paste</label>
  46. </div>
  47. <div class="ui icon mini input pasteOnly" style="margin-left: 1em; width: 50%">
  48. <input ondblclick="openCurrentPath();" type="text" id="savepath" placeholder="user:/Desktop" readonly>
  49. <i onclick="pickSavePath();" title="Pick save location" class="circular folder link icon"></i>
  50. </div>
  51. <div style="float: right; display:none;" id="uploadSuccIcon">
  52. <i class="ui green checkmark icon"></i> Uploaded
  53. </div>
  54. </div>
  55. <script>
  56. var uploadOnPaste = false;
  57. var savePath = "user:/Desktop";
  58. var currentViewingPhotoBlob = undefined;
  59. //Get file information from the hash info
  60. var files = ao_module_loadInputFiles();
  61. if (files != null && files.length > 0){
  62. //Copy Mode
  63. var file = files[0]
  64. $("#preview").attr("src", "../../../media?file=" + file.filepath);
  65. $(".pasteOnly").hide();
  66. $("#pasteInstructin").text("Copy Image");
  67. $("#instruction").text(`Right click the image and select "Copy Image" to copy the image to clipboard.`);
  68. }else{
  69. //Paste Mode
  70. document.onpaste = function(event){
  71. var items = (event.clipboardData || event.originalEvent.clipboardData).items;
  72. console.log(JSON.stringify(items)); // will give you the mime types
  73. for (index in items) {
  74. var item = items[index];
  75. if (item.kind === 'file') {
  76. var blob = item.getAsFile();
  77. var reader = new FileReader();
  78. reader.onload = function(event){
  79. console.log(event.target.result);
  80. $("#preview").attr("src", event.target.result);
  81. if (uploadOnPaste){
  82. uploadImageToTarget();
  83. }
  84. }; // data url!
  85. reader.readAsDataURL(blob);
  86. currentViewingPhotoBlob = blob;
  87. }
  88. }
  89. }
  90. }
  91. //Load previous configs
  92. ao_module_storage.loadStorage("imgPaste", "uploadOnPaste", function(data){
  93. if (data == "true"){
  94. $("#uploadOnPaste")[0].checked = true;
  95. uploadOnPaste = true;
  96. }else{
  97. $("#uploadOnPaste")[0].checked = false;
  98. }
  99. });
  100. ao_module_storage.loadStorage("imgPaste", "savepath", function(data){
  101. savePath = data || "user:/Desktop";
  102. $("#savepath").val(savePath);
  103. });
  104. function toggleUploadOnPaste(checked){
  105. uploadOnPaste = checked;
  106. if (checked){
  107. ao_module_storage.setStorage("imgPaste", "uploadOnPaste", "true");
  108. }else{
  109. ao_module_storage.setStorage("imgPaste", "uploadOnPaste", "false");
  110. }
  111. }
  112. function pickSavePath(){
  113. ao_module_openFileSelector(fileSelected, savePath, "folder",false);
  114. }
  115. function openCurrentPath(){
  116. ao_module_openPath(savePath);
  117. }
  118. function fileSelected(filedata){
  119. for (var i=0; i < filedata.length; i++){
  120. var filename = filedata[i].filename;
  121. var filepath = filedata[i].filepath;
  122. $("#savepath").val(filepath);
  123. savePath = filepath;
  124. }
  125. //Save the value to storage
  126. ao_module_storage.setStorage("imgPaste", "savepath", savePath);
  127. }
  128. function uploadImageToTarget(){
  129. //Convert the image to file object
  130. if (currentViewingPhotoBlob == undefined){
  131. return;
  132. }
  133. var now = new Date();
  134. var currentUnix = Date.now()+"";
  135. var filename = "ImagePaste " + now.getUTCFullYear() + "-" + now.getUTCMonth() + "-" + now.getUTCDate() + (currentUnix).substr(currentUnix.length-6) + ".png";
  136. var imageFile = new File([currentViewingPhotoBlob], filename);
  137. ao_module_uploadFile(imageFile, savePath, function(data){
  138. if (data.error !== undefined){
  139. alert(data.error);
  140. }else{
  141. $("#uploadSuccIcon").slideDown("fast").delay(3000).slideUp("fast");
  142. }
  143. });
  144. }
  145. </script>
  146. </body>
  147. </html>