compact

package.json

@@ -11,12 +11,11 @@
   },
   "dependencies": {
     "axios": "^0.27.2",
-    "bluebird": "^3.7.2",
     "clipboard": "^2.0.11",
     "crypto-js": "^4.1.1",
     "escape-html": "^1.0.3",
     "file-saver": "^2.0.5",
-    "localforage": "^1.10.0",
+    "html2canvas": "^1.4.1",
     "pako": "^2.1.0",
     "qrcodejs2": "^0.0.2",
     "view-design": "^4.7.0",

public/index.html

@@ -44,7 +44,9 @@
     type="text/javascript"></script>
   <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js" rel="stylesheet"
     type="text/javascript"></script>
-  <script src="https://cdn.jsdelivr.net/npm/wasm-flate@1.0.2-browser/wasm_flate.js" rel="stylesheet"
+  <script src="https://cdn.jsdelivr.net/npm/wasm-flate@1.0.2-browser/wasm_flate.min.js" rel="stylesheet"
+    type="text/javascript"></script>
+  <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js" rel="stylesheet"
     type="text/javascript"></script>
   <script>
     window.wasm_flate_bg_path = "https://cdn.jsdelivr.net/npm/wasm-flate@1.0.2-browser/wasm_flate_bg.wasm"

public/redirect.html

@@ -6,18 +6,11 @@
     <meta name="renderer" content="webkit" />
     <meta name="force-rendering" content="webkit" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <meta name="viewport"
-        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
-    <meta name="keywords" content="flagnote" />
-    <meta name="description" content="flag note" />
     <meta name="theme-color" content="#ed4014" />
-    <meta name="format-detection" content="telephone=no,email=no,adress=no" />
-    <meta name="google" content="notranslate">
     <meta http-equiv="Expires" content="0" />
     <meta http-equiv="Pragma" content="no-cache" />
     <meta http-equiv="Cache-control" content="no-cache" />
     <meta http-equiv="Cache" content="no-cache" />
-    <link rel="icon" href="/static/favicon.png" />
     <title>flagnote.com</title>
     <style>
         body {
@@ -25,10 +18,7 @@
         }
     </style>
     <script>
-
         const servicePath = "";
-        //const servicePath="https://flagnote.com";
-
         function ajaxGet(url) {
             let data = null;
             let xmlhttp = new XMLHttpRequest();
@@ -62,8 +52,12 @@
 
         let keyMeta = getKeyMeta();
 
-        sessionStorage.setItem("keyMeta", JSON.stringify(keyMeta));
+        if (keyMeta && keyMeta.key) {
-        location.href = "/" + keyMeta.key;
+            sessionStorage.setItem(keyMeta.key + ".keyMeta", JSON.stringify(keyMeta));
+            location.href = "/" + keyMeta.key;
+        } else {
+            location.href = "/100006";
+        }
     </script>
 </head>
 

src/api/note.js

@@ -1,7 +1,7 @@
 import axios from "axios";
 import { getStoreKey } from "@/api/lock";
 import storage from "@/libs/storage";
-import { md5, wrap } from "@/libs/secret";
+import { md5, wrap} from "@/libs/secret";
 import NoteConstant from "@/libs/constants";
 
 axios.interceptors.response.use(undefined, (err) => {
@@ -17,10 +17,10 @@ axios.interceptors.response.use(undefined, (err) => {
   }
 });
 
-export async function saveNote(noteForm, secret) {
+export function saveNote(noteForm, secret) {
   let storeKey = secret.storeKey;
 
-  const storeInfo = await storage.local.getText(storeKey);
+  let storeInfo = storage.local.getText(storeKey);
   let starray = storeInfo.split("|");
 
   if (starray[2] == "1") {
@@ -48,7 +48,7 @@ export async function saveNote(noteForm, secret) {
     });
   }
 
-  let bufferArrary = eval("[100,111,32,110,111,116,32," + note.text + ",100,111,32,101,118,105,108]");
+  let bufferArrary = eval("[" + note.text + "]");
   let array = Uint8Array.from(bufferArrary);
   let blob = new Blob([array], { type: "application/octet-stream" });
   let form = new FormData();
@@ -71,13 +71,14 @@ export async function saveNote(noteForm, secret) {
   });
 }
 
-export async function deleteNote(key) {
+export function deleteNote(key) {
   let storeKey = getStoreKey(key);
-  const storeInfo = await storage.local.getText(storeKey);
+  let storeInfo = storage.local.getText(storeKey);
   let note = {
     cipher: storeInfo.substring(2, 34),
     key: key,
   };
+
   return axios({
     url: NoteConstant.servicePath + "/note/" + key + "/delete",
     method: "post",
@@ -96,28 +97,6 @@ export function getNoteBlob(key) {
   });
 }
 
-export function getNoteMetaNew(key) {
-  let url = NoteConstant.servicePath + "/note/" + key + "/noteMeta";
-  return axios({
-    url: url,
-    method: "get",
-    ignoreError: 1,
-    original: true,
-    source: true,
-  });
-}
-
-export function getKeyMetaNew() {
-  let url = NoteConstant.servicePath + "/note/keyMeta";
-  return axios({
-    url: url,
-    method: "get",
-    ignoreError: 1,
-    original: true,
-    source: true,
-  });
-}
-
 export function getNoteMeta(key) {
   let url = NoteConstant.servicePath + "/note/" + key + "/noteMeta";
   let noteMeta = null;

src/i18n/config/zh.js

@@ -26,6 +26,9 @@ const zh = {
     "100006": "服务器不可用！",
     "100011": "笔记为空!",
     "100012": "笔记过大，超过{0}!",
+    "100013": "The address is used, Copy to a new address.",
+    "100014": "The text has been modified.",
+    "800001": "Repetitive Submit!",
   }
 };
 export default zh;

src/libs/page.js

@@ -1,197 +0,0 @@
-import { getStoreKey } from "@/api/lock";
-import storage from "@/libs/storage";
-import { getNoteMetaNew, getNoteBlob } from "@/api/note";
-import { reject } from "bluebird";
-import { unwrap, md5 } from '@/libs/secret'
-
-
-export async function initPageData(view) {
-
-    let noteKey = view.noteForm.key;
-
-    let storeKey = getStoreKey(noteKey);
-    view.secret.storeKey = storeKey;
-
-    let keyMeta = storage.session.getObject("keyMeta");
-    if (keyMeta) {
-        view.state.lock = 0;
-        view.secret.cipher = keyMeta.cipher;
-        view.secret.secretKey = keyMeta.secretKey;
-        view.state.serverTime = keyMeta.serverTime;
-        // key init Time
-        view.state.initTime = keyMeta.serverTime;
-
-        await storage.local.setText(storeKey, "0|" + view.secret.cipher + "|0|" + view.state.initTime + "|");
-        storage.session.delete("keyMeta");
-        return "000000";
-    }
-
-    let noteMeta = storage.session.getObject(noteKey+".noteMeta");
-
-    if(null==noteMeta){
-        let resp = await getNoteMetaNew(view.noteForm.key);
-        if (null == resp || null == resp.data) {
-            return "100006";
-        }
-        let result = resp.data;
-        if (result.code != '000000') {
-            return result.code;
-        }
-        let noteMeta = result.data;
-        if (null == noteMeta) {
-            return "100001";
-        }
-        if (null == noteMeta.key) {
-            return "100002";
-        }
-        storage.session.setObject(noteKey+".noteMeta",noteMeta);
-    }else{
-        getNoteMetaNew(view.noteForm.key).then(function(resp){
-            if (null == resp || null == resp.data) {
-                return "100006";
-            }
-            let result = resp.data;
-            if (result.code != '000000') {
-                return result.code;
-            }
-            let noteMeta = result.data;
-            if (null == noteMeta) {
-                return "100001";
-            }
-            if (null == noteMeta.key) {
-                return "100002";
-            }
-        });
-    }
-
-    //view
-    if (1 == noteMeta.state) {
-
-        view.secret.secretKey = noteMeta.secretKey;
-
-        view.state.lock = noteMeta.lock;
-        view.state.initTime = new Date().getTime();
-        view.state.initTtl = noteMeta.ttl;
-        view.state.ttl = noteMeta.ttl;
-        view.state.serverTime = noteMeta.serverTime;
-
-        view.secret.cipher = "00000000000000000000000000000000";//noteMeta.cipher; //读者有没有值可配置
-        view.secret.md5 = noteMeta.md5;
-
-        await loadText(view);
-        return "000000";
-    }
-
-    //deleted
-    if (0 == noteMeta.state) {
-        let storeKey = getStoreKey(noteKey);
-        storage.local.delete(storeKey);
-        // user deleted
-        if (noteMeta.ttl > 0) {
-            // errorMeta = 100003;
-            return "100003";
-            //return errorRouter(100003);
-        } else {// timeout
-            // errorMeta = 100004;
-            return "100004";
-            //return errorRouter(100004);
-        }
-    }
-
-    //edit or unsubmitted
-    if (null == noteMeta.state) {
-        let storeKey = getStoreKey(noteKey);
-        const storeInfo = await storage.local.getText(storeKey);
-
-        //if has storage , then edit
-        if (null != storeInfo) {
-            view.secret.secretKey = noteMeta.secretKey;
-
-            let starray = storeInfo.split('|');
-            view.state.lock = parseInt(starray[0]);
-            view.secret.cipher = starray[1];
-            view.state.initTime = parseInt(starray[3]);
-            //draw text;
-            if (starray[4]) {
-                view.noteForm.text = unwrap(starray[4], view.secret.secretKey);
-            }
-
-            return "000000";
-        }
-
-        //storage is empty 
-        let df = storage.session.getText(storeKey + "_delete")
-        if (df) {//unsubmitted,user deleted.
-            // errorMeta = 100003;
-            return "100003";
-        } else {//unsubmitted
-            // errorMeta = 100005;
-            return "100005";
-        }
-    }
-
-
-}
-
-async function loadText(view) {
-
-    let storeInfo = await storage.local.getText(view.secret.storeKey);
-
-    let starray = [];
-    if (storeInfo) {
-        starray = storeInfo.split('|');
-    }
-
-    if (!storeInfo || !starray[4] || (md5(starray[4]) != view.secret.md5)) {
-
-        let bytesString = await getServerNote(view.noteForm.key);
-        view.noteForm.text = unwrap(bytesString, view.secret.secretKey);
-    } else {
-        starray = storeInfo.split('|');
-
-        if (!starray[4]) {
-            return;
-        }
-
-        view.noteForm.text = unwrap(starray[4], view.secret.secretKey);
-        //this.noteForm.escapeText = getEscapeText(this.noteForm.text);
-
-        // local is usable, and set commited flag
-        if ("0" == starray[2]) {
-            storage.local.setText(this.secret.storeKey, starray[0] + "|" + starray[1] + "|1|" + starray[3] + "|" + starray[4]);
-        }
-    }
-}
-
-async function getServerNote(key) {
-    let resp = await getNoteBlob(key)
-    if (!resp.data || resp.data.size == 0) {
-        return "100006";
-    }
-
-    let blob = new Blob([resp.data], {
-        type: resp.data.type
-    });
-
-    let bytesString = await fileReader(blob);
-
-    return bytesString;
-
-
-}
-
-async function fileReader(blob) {
-    return new Promise(function (resolve) {
-        let reader = new FileReader();
-        reader.onload = function (e) {
-            if (!e.target.result || e.target.result.byteLength == 0) {
-                reject("");
-            }
-            var bytes = new Uint8Array(e.target.result);
-            bytes = bytes.subarray(7, bytes.length - 7);
-            let bytesString = bytes.join(",");
-            resolve(bytesString);
-        };
-        reader.readAsArrayBuffer(blob)
-    });
-}

src/libs/storage.js

@@ -1,5 +1,3 @@
-import localforage from "localforage";
-
 class Storage {
   constructor() {
     this.session = new Session();
@@ -31,23 +29,23 @@ class Session {
 
 class Local {
   setObject(key, value) {
-    return localforage.setItem(key, JSON.stringify(value));
+    localStorage.setItem(key, JSON.stringify(value));
   }
 
   getObject(key) {
-    return JSON.parse(localforage.getItem(key));
+    return JSON.parse(localStorage.getItem(key));
   }
 
   delete(key) {
-    return localforage.removeItem(key);
+    localStorage.removeItem(key);
   }
 
   setText(key, value) {
-    return localforage.setItem(key, value);
+    localStorage.setItem(key, value);
   }
 
   getText(key) {
-    return localforage.getItem(key);
+    return localStorage.getItem(key);
   }
 
   getUseSize() {

src/router/index.js

@@ -1,17 +1,122 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import NoteView from "@/views/NoteView.vue";
+import EditNote from "@/views/EditNote.vue";
-import ErrorView from "@/views/ErrorView.vue";
+import ViewNote from "@/views/ViewNote.vue";
+import ErrorRoute from "@/views/ErrorRoute.vue";
+import ErrorNote from "@/views/ErrorNote.vue";
+import { getNoteMeta } from "@/api/note";
+import { getStoreKey } from "@/api/lock";
+import storage from "@/libs/storage";
 
 Vue.use(VueRouter);
 
+var keyMeta = null;
+var noteMeta = null;
+var errorMeta = null;
+
+function getKeyMetaParam() {
+  return keyMeta;
+}
+
+function getNoteMetaParam() {
+  return noteMeta;
+}
+
+function getErrorMetaParam() {
+  return errorMeta;
+}
+
+function getNoteView() {
+  if (errorMeta) {
+    return;
+  }
+
+  let path = location.pathname;
+
+  let key = path.substring(1, path.length);
+
+  keyMeta = storage.session.getObject(key+".keyMeta");
+  if (keyMeta && keyMeta.key) {
+    key = keyMeta.key;
+  }
+
+  let regKey = /^[abcdefhikmnopqstuvwxyz23456789]{16}$/;
+  if (!regKey.test(key)) {
+    errorMeta = 100002;
+    return ErrorNote;
+  }
+
+  if (keyMeta && keyMeta.key) {
+    //firstEdit
+    return EditNote;
+  }
+
+  //set noteMeta
+  noteMeta = getNoteMeta(key);
+
+  //server error
+  if (!noteMeta) {
+    errorMeta = 100006;
+    return ErrorNote;
+  }
+
+  //invalidated key
+  if (!noteMeta.key) {
+    errorMeta = 100002;
+    return ErrorNote;
+  }
+
+  //validated state
+  if (1 == noteMeta.state) {
+    return ViewNote;
+  }
+
+  //deleted
+  if (0 == noteMeta.state) {
+    let storeKey = getStoreKey(key);
+    storage.local.delete(storeKey);
+    // user deleted
+    if (noteMeta.ttl > 0) {
+      errorMeta = 100003;
+      return ErrorNote;
+    } else {// timeout
+      errorMeta = 100004;
+      return ErrorNote;
+    }
+  }
+
+  if (null == noteMeta.state) {
+    let storeKey = getStoreKey(key);
+    //if has storage , then edit
+    if (storage.local.getText(storeKey)) {
+      return EditNote;
+    } else {
+      //storage is empty 
+      let df = storage.session.getText(storeKey + "_delete")
+      if (df) {//unsubmitted,user deleted.
+        errorMeta = 100003;
+        return ErrorNote;
+      } else {//unsubmitted
+        errorMeta = 100005;
+        return ErrorNote;
+      }
+    }
+  }
+
+  // other exception
+  errorMeta = 100001;
+  return ErrorNote;
+}
+
 const routes = [
+  { path: "/error_:code([0-9]{6})", component: ErrorNote },
   {
-    path: "/:name([abcdefhikmnopqstuvwxyz23456789]{16})",
+    path: "/:name([a-z0-9]{10,20})",
     name: "note",
-    component: NoteView,
+    component: getNoteView(),
+    meta: { keyMeta: getKeyMetaParam(), noteMeta: getNoteMetaParam(), errorMeta: getErrorMetaParam() },
   },
-  { path: "/:path(.*)", component: ErrorView }
+  { path: "/:path(.*)", component: ErrorRoute }
 ];
 
 const router = new VueRouter({

src/views/EditNote.vue

@@ -100,7 +100,7 @@
                 <Button-group size="large">
                   <Button aria-label="publish" type="error" :loading="model.submitting"
                     style="margin-left:5px; border-radius: 0px;font-size: 21px;" @click="submitNote()"
-                    icon="md-share"></Button>
+                    icon="md-cloud-upload"></Button>
                   <Button aria-label="menu" type="error" style="margin-left:3px; border-radius: 0px;font-size: 24px;"
                     @click="switchMenu()" @blur.native="hideMenu()" icon="md-menu"></Button>
 
@@ -113,18 +113,13 @@
               <Button-group vertical size="large">
                 <Button aria-label="create note" type="error" style="border-radius: 0px;font-size: 24px;"
                   @click="createNote(); switchMenu(); " icon="md-add"></Button>
-                <!--
                 
-                    <Button type="error" icon="md-refresh" style="border-radius: 0px;font-size: 14px;font-size: 24px;"
+                <Button aria-label="crop" v-show="model.showDownloadText" type="error" 
-                    @click="refreshPage()"></Button>
+                 style="border-radius: 0px;font-size: 24px;" @click="saveImage();switchMenu();"
-                  -->
+                 icon="md-crop"></Button>
 
                 <Button aria-label="download text" v-show="model.showDownloadText" type="error"
-                  style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); switchMenu(); "
+                  style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); switchMenu();"
-                  icon="md-download"></Button>
-
-                <Button aria-label="history text" v-show="model.showHistoryText" type="error"
-                  style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); switchMenu(); "
                   icon="md-download"></Button>
 
                 <Button type="error" icon="md-trash" style="border-radius: 0px;font-size: 24px;"
@@ -149,7 +144,7 @@
               :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
             <Card :padding="0">
               <Form :model="noteForm" :label-width="80">
-                <div id="wrapper" style="border-left: 2px solid #ed4014;">
+                <div  ref="html2canvas" id="wrapper" style="border-left: 2px solid #ed4014;">
                   <Input element-id="noteText" type="textarea" :border="false" v-model="noteForm.text" autofocus
                     :autosize="{ minRows: 30, maxRows: 409600 }" :placeholder="$t('content.noteTip')" @input="recordText"
                     @on-keydown="recordEventKdown" />
@@ -163,7 +158,7 @@
 
       </Content>
 
-      <Footer class="layout-footer-center">2022 &copy; flagnote.com</Footer>
+      <Footer class="layout-footer-center">2023 &copy; flagnote.com</Footer>
     </Layout>
 
     <Modal v-model="model.showDelete" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
@@ -201,6 +196,7 @@ import { setStoreText,setNewStoreText } from "@/libs/noteStorage";
 import { saveAs } from 'file-saver';
 import { isWeixin } from "@/libs/utils";
 import NoteConstant from "@/libs/constants";
+import html2canvas from "html2canvas";
 
 export default {
   name: 'EditNote',
@@ -247,10 +243,10 @@ export default {
     let keyMeta = this.$route.meta.keyMeta;
 
     //ipad chrome url not redirect
-    let path = location.pathname;
+    // let path = location.pathname;
-    if ("/" == path) {
+    // if ("/" == path) {
-      history.pushState('', '', '/' + this.noteForm.key);
+    //   history.pushState('', '', '/' + this.noteForm.key);
-    }
+    // }
 
     //wx does not show downloadText
     this.model.showDownloadText = !isWeixin();
@@ -276,6 +272,7 @@ export default {
       // }
 
       storage.local.setText(storeKey, "0|" + this.secret.cipher + "|0|" + this.state.initTime + "|");
+      storage.session.delete(keyMeta.key+".keyMeta");
     } else {
       // second edit
       let noteMeta = this.$route.meta.noteMeta;
@@ -497,7 +494,62 @@ export default {
           }
         }
       }
-    }
+    },
+    dataURLToBlob(dataurl) {
+      let arr = dataurl.split(',');
+      let mime = arr[0].match(/:(.*?);/)[1];
+      let bstr = atob(arr[1]);
+      let n = bstr.length;
+      let u8arr = new Uint8Array(n);
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+      return new Blob([u8arr], { type: mime });
+    },
+    saveImage() {
+      let canvasID = this.$refs["html2canvas"];
+
+      let that = this;
+      let a = document.createElement('a');
+      html2canvas(canvasID,{
+        scale: 1, 
+        windowWidth: parseInt(document.getElementById("noteText").offsetWidth)+2,
+        onclone: (clonedDocument) => {
+          let nt = clonedDocument.getElementById("noteText");
+          const div = clonedDocument.createElement('div')
+          div.innerText = nt.value
+
+          div.style.color="black";
+          div.style.padding = "10px";
+          div.style.textAlign = "left";
+          div.style.wordBreak = "break-word";
+          div.style.whiteSpace = "pre-wrap";
+          div.style.verticalAlign = "top";
+          div.style.fontSize ="15px";
+          div.style.width= "100%";
+          div.style.border="0px";
+          div.style.fontFamily="'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif";
+
+          nt.style.display = 'none'
+
+          nt.parentElement.parentElement.style.borderLeftColor = "white";
+
+          nt.parentElement.append(div)
+        }
+      }).then(canvas => {
+        let dom = document.body.appendChild(canvas);
+        dom.style.display = 'none';
+        a.style.display = 'none';
+        document.body.removeChild(dom);
+        let blob = that.dataURLToBlob(dom.toDataURL('image/png'));
+        a.setAttribute('href', URL.createObjectURL(blob));
+        a.setAttribute('download', that.noteForm.key + '.png');
+        document.body.appendChild(a);
+        a.click();
+        URL.revokeObjectURL(blob);
+        document.body.removeChild(a);
+      });
+    },
   }
 }
 </script>

src/views/ErrorNote.vue

@@ -81,7 +81,7 @@
       </Content>
 
 
-      <Footer class="layout-footer-center">2022 &copy; flagnote.com</Footer>
+      <Footer class="layout-footer-center">2023 &copy; flagnote.com</Footer>
 
     </Layout>
   </div>

src/views/ErrorRoute.vue

@@ -6,7 +6,7 @@
 
 <script>
 export default {
-  name: 'ErrorView',
+  name: 'ErrorRoute',
   components: {},
   data() {
     return {}

src/views/NoteView.vue

@@ -1,449 +0,0 @@
-<style scoped>
-.layout {
-  height: 100%;
-  background: #dddddd;
-}
-
-.header {
-  background: #dddddd;
-}
-
-.ivu-layout-header {
-  line-height: normal;
-  height: auto;
-  padding: 0px;
-}
-
-.content {
-  background: #dddddd;
-}
-
-.ivu-layout-content {
-  padding: 0px;
-}
-
-
-.layout-footer-center {
-  background: #dddddd;
-  text-align: center;
-}
-
-.ivu-card-bordered {
-  border: 0px solid #dcdee2;
-  border-color: #e8eaec;
-}
-
-.fnmodal {
-  align-items: center;
-  justify-content: center;
-}
-
-
-
-@media print {
-
-  @page {
-    size: portrait;
-    margin: 20px;
-  }
-
-  body {
-    margin: 0.8cm;
-    background-color: #ffffff;
-  }
-
-  .header {
-    display: none;
-  }
-
-  .layout-footer-center {
-    display: none;
-  }
-
-}
-</style>
-
-<template>
-  <div class="layout">
-
-    <Layout>
-
-      <Header class="header">
-        <Row>
-          <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
-            :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
-
-          <Affix :offset-top="0">
-            <div :class="[showHeaderShade ? 'noteHeaderShade' : 'noteHeader']">
-
-              <img style="height:40px;float:left;cursor: pointer;" alt="refresh flagnote" src="/static/logo.png"
-                v-on:click="refreshPage()" />
-
-              <div style="float:left;width:auto;">
-
-                <Button-group size="large">
-
-
-
-                  <Button aria-label="to top" v-show="toTopState" type="text"
-                    style="margin-left:5px; border-radius: 0px; font-size: 28px;color:red;line-height: 20px;"
-                    @click="toTop()" icon="ios-arrow-up" ghost></Button>
-
-                </Button-group>
-
-              </div>
-
-
-
-              <div style="float:right;width:auto;">
-
-                <Button-group size="large">
-                  <Button aria-label="publish" type="error" :loading="model.submitting"
-                    style="margin-left:5px; border-radius: 0px;font-size: 21px;" @click="submitNote()"
-                    icon="md-share"></Button>
-                  <Button aria-label="menu" type="error" style="margin-left:3px; border-radius: 0px;font-size: 24px;"
-                    @click="switchMenu()" @blur.native="hideMenu()" icon="md-menu"></Button>
-
-                </Button-group>
-              </div>
-            </div>
-
-            <div id="noteMenu" :class="[showMenuState ? 'showBlock' : 'hideBlock']"
-              style="z-index: 100; position: absolute;top:43px;right:0px;left:auto;">
-              <Button-group vertical size="large">
-                <Button aria-label="create note" type="error" style="border-radius: 0px;font-size: 24px;"
-                  @click="createNote(); switchMenu(); " icon="md-add"></Button>
-                <!--
-
-                          <Button type="error" icon="md-refresh" style="border-radius: 0px;font-size: 14px;font-size: 24px;"
-                          @click="refreshPage()"></Button>
-                        -->
-
-                <Button aria-label="download text" v-show="model.showDownloadText" type="error"
-                  style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); switchMenu(); "
-                  icon="md-download"></Button>
-
-                <Button aria-label="history text" v-show="model.showHistoryText" type="error"
-                  style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); switchMenu(); "
-                  icon="md-download"></Button>
-
-                <Button type="error" icon="md-trash" style="border-radius: 0px;font-size: 24px;"
-                  @click="showDeleteModel(); switchMenu(); "></Button>
-
-              </Button-group>
-
-
-            </div>
-          </Affix>
-
-
-
-          </Col>
-        </Row>
-      </Header>
-
-      <Content class="content">
-        <div style="min-height: 650px;">
-          <Row>
-            <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
-              :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
-            <Card :padding="0">
-              <Form :model="noteForm" :label-width="80">
-                <div id="wrapper" style="border-left: 2px solid #ed4014;">
-                  <Input element-id="noteText" type="textarea" :border="false" v-model="noteForm.text" autofocus
-                    :autosize="{ minRows: 30, maxRows: 409600 }" :placeholder="$t('content.noteTip')" @input="recordText"
-                    @on-keydown="recordEventKdown" />
-                </div>
-              </Form>
-            </Card>
-            </Col>
-
-          </Row>
-        </div>
-
-      </Content>
-
-      <Footer class="layout-footer-center">2022 &copy; flagnote.com</Footer>
-    </Layout>
-
-    <Modal v-model="model.showDelete" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
-      <p style="text-align: center;font-size:medium ;margin-bottom: 20px;">
-        {{ $t("message.askTodelete") }}
-      </p>
-      <p style="text-align: center;">
-        <Button type="error" :loading="model.deleting" style="border-radius: 0px;font-size: 19px;" @click="dropNote()">{{
-          $t("button.yes")
-        }}</Button>
-      </p>
-    </Modal>
-
-    <Modal v-model="model.showError" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
-      <p style="text-align: center;font-size:medium ;margin-bottom: 20px;">
-        {{ errorInfo }}
-      </p>
-      <p style="text-align: center;">
-        <Button type="error" style="border-radius: 0px;font-size: 19px;" @click="cloaseErrorMessage()">{{
-          $t("button.close")
-        }}</Button>
-      </p>
-    </Modal>
-
-
-  </div>
-</template>
-
-<script>
-import { initPageData } from "@/libs/page"
-import { saveNote } from "@/api/note";
-import storage from "@/libs/storage";
-import { setStoreText, setNewStoreText } from "@/libs/noteStorage";
-import { saveAs } from 'file-saver';
-import { isWeixin } from "@/libs/utils";
-import NoteConstant from "@/libs/constants";
-
-export default {
-  name: 'NoteView',
-  props: {},
-  components: {},
-  data() {
-    return {
-      noteForm: {
-        text: '',
-        key: '',
-      },
-      secret: {
-        storeKey: '',
-        secretKey: '',
-        cipher: '',
-        password: '',
-      },
-      state: {
-        lock: 0,
-        locking: 0,
-        commited: 0,
-        serverTime: '',
-        initTime: '',
-      },
-      model: {
-        submitting: false,
-        showDelete: false,
-        deleting: false,
-        showDownloadText: false,
-        showError: false,
-      },
-      toTopState: false,
-      showMenuState: false,
-      showHeaderShade: false,
-      pageSession: '',
-      errorInfo: '',
-    }
-  },
-  created() {
-    this.noteForm.key = this.$route.params.name;
-
-
-
-
-
-
-    
-
-    //wx does not show downloadText
-    this.model.showDownloadText = !isWeixin();
-    // let noteMeta = this.$route.meta.noteMeta;
-    initPageData(this);
-  },
-  mounted() {
-    const myObserver = new ResizeObserver(entries => {
-      // iterate over the entries, do something.
-      entries.forEach(entry => {
-        let affix = document.querySelector('.ivu-affix');
-        if (affix) {
-          affix.setAttribute("style", "top: 0px; width: " + (entry.contentRect.width + 2) + "px;");
-        }
-
-      });
-    });
-
-    const someOtherEl = document.querySelector('#wrapper');
-
-    myObserver.observe(someOtherEl);
-
-    this.bindCtrlAllEvent();
-    this.bindToTopEvent();
-    window.wasm_bindgen(window.wasm_flate_bg_path);
-  },
-  updated() {
-  },
-  beforeDestroy() {
-  },
-  destroyed() {
-  },
-  computed: {},
-  watch: {},
-  methods: {
-
-    toTop() {
-      window.scrollTo(0, 0);
-      let elent = document.querySelector('#noteText');
-      elent.selectionStart = 0;
-      elent.selectionEnd = 0;
-      elent.focus();
-    },
-    refreshPage() {
-      window.location.reload();
-    },
-    switchMenu() {
-      this.showMenuState = !this.showMenuState;
-    },
-    hideMenu() {
-      let hbt = document.querySelector('#noteMenu > div > button:hover');
-      if (!hbt) {
-        this.showMenuState = false;
-      }
-    },
-    downLoadText() {
-      var blob = new Blob([this.noteForm.text], { type: "application/octet-stream;charset=utf-8" });
-      saveAs(blob, this.noteForm.key + ".txt");
-    },
-    recordText() {
-      let text = this.noteForm.text;
-      if (text.length > NoteConstant.noteMaxCount) {
-        this.errorInfo = this.$t('error.100012', [NoteConstant.noteMaxDesc]);
-        this.model.showError = true;
-        return;
-      }
-
-      setStoreText(this.noteForm, this.state, this.secret);
-    },
-    recordEventKdown(event) {
-
-      if (event.key == "Tab") {
-
-        let start = event.currentTarget.selectionStart;
-        let end = event.currentTarget.selectionEnd;
-        let text = event.currentTarget.value;
-
-        if (text.length > NoteConstant.noteMaxCount) {
-          this.errorInfo = this.$t('error.100012', [NoteConstant.noteMaxDesc]);
-          this.model.showError = true;
-          return;
-        }
-
-        let tab = '\t';//\t
-        text = text.substr(0, start) + tab + text.substr(start);
-        event.currentTarget.value = text;
-        event.currentTarget.selectionStart = start + tab.length;
-        event.currentTarget.selectionEnd = end + tab.length;
-        event.stopPropagation();
-        if (event.preventDefault) {
-          event.preventDefault();
-        }
-
-        this.noteForm.text = event.currentTarget.value;
-        setStoreText(this.noteForm, this.state, this.secret);
-
-      } else if (event.ctrlKey && (event.which == 13)) {
-        //save
-        this.submitNote();
-      }
-    },
-    save() {
-      return saveNote(this.noteForm, this.secret);
-    },
-    validateForm() {
-      let text = this.noteForm.text;
-      if (text.length > NoteConstant.noteMaxCount) {
-        this.errorInfo = this.$t('error.100012', [NoteConstant.noteMaxDesc]);
-        this.model.showError = true;
-        return false;
-      }
-      if (text.length == 0) {
-        this.errorInfo = this.$t('error.100011');
-        this.model.showError = true;
-        return false;
-      }
-      return true;
-    },
-    cloaseErrorMessage() {
-      this.errorInfo = '';
-      this.model.showError = false;
-    },
-    submitNote() {
-      if (this.state.locking == 1) {
-        return;
-      }
-
-      if (!this.validateForm()) {
-        this.state.locking = 0;
-        return;
-      }
-
-      this.model.submitting = true;
-
-      let that = this;
-      this.save().then(res => {
-        if (res.data && res.data.code == "000000") {
-          storage.session.setText(that.secret.storeKey + "_share", '1');
-
-          that.state.commited = 1;
-          setStoreText(this.noteForm, this.state, this.secret);
-
-          location.reload();
-          this.state.locking = 0;
-        } else {
-          alert(res.data.code);
-          this.model.submitting = false;
-          this.state.locking = 0;
-          if (res.data.code == "100013" || res.data.code == "800001") {
-            let key = setNewStoreText(this.noteForm);
-            location.href = "/" + key;
-          }
-
-        }
-      }).catch(error => {
-        alert(error);
-      });
-    },
-    refresh() {
-      location.reload();
-    },
-    createNote() {
-      window.open("/");
-    },
-    showDeleteModel() {
-      this.model.showDelete = true;
-    },
-    dropNote() {
-      this.model.deleting = true;
-      storage.local.delete(this.secret.storeKey);
-      storage.session.setText(this.secret.storeKey + "_delete", 1);
-      location.reload();
-    },
-    bindToTopEvent() {
-      let that = this;
-      window.onscroll = function () {
-        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
-        if (scrollTop >= 20) {
-          that.toTopState = true;
-          that.showHeaderShade = true;
-        } else {
-          that.toTopState = false;
-          that.showHeaderShade = false;
-        }
-      }
-    },
-    bindCtrlAllEvent() {
-      if (window.getSelection && document.createRange) {
-        document.onkeydown = (e) => {
-          if ((e.ctrlKey || e.metaKey) && e.key == "a") {
-            e.preventDefault();
-            var element = document.getElementById("noteText");
-            element.select();
-          }
-        }
-      }
-    }
-  }
-}
-</script>

src/views/ViewNote.vue

@@ -172,17 +172,17 @@
               <img style="height:40px;float:left;cursor: pointer;" alt="refresh flagnote" src="/static/logo.png"
                 v-on:click="refreshPage()">
               <!--
-              <div style="float:left;width:auto;vertical-align: center;">
+                  <div style="float:left;width:auto;vertical-align: center;">
-                    <div style="font-size: 18px;
+                        <div style="font-size: 18px;
-                    color: red;
+                        color: red;
-                    line-height: 40px;
+                        line-height: 40px;
-                    display: inline-block;
+                        display: inline-block;
-                    font-weight: bold;
+                        font-weight: bold;
-                    height: 40px;">{{
+                        height: 40px;">{{
-                        state.ttlDesc
+                            state.ttlDesc
-                    }}</div>
+                        }}</div>
-              </div>
+                  </div>
-              -->
+                  -->
 
 
               <div style="float:left;width:auto;">
@@ -220,18 +220,19 @@
             <div id="noteMenu" :class="[showMenuState ? 'showBlock' : 'hideBlock']"
               style="z-index: 100; position: absolute;top:43px;right:0px;left:auto;">
               <Button-group vertical size="large">
-                <Button type="error" icon="md-add" style="border-radius: 0px;font-size: 24px;"
+                <Button aria-label="new note" type="error" icon="md-add" style="border-radius: 0px;font-size: 24px;"
                   @click="createNote(); switchMenu();"></Button>
 
                 <!--
 
-                  <Button type="error" icon="md-refresh" style="border-radius: 0px;font-size: 24px;"
+                      <Button type="error" icon="md-refresh" style="border-radius: 0px;font-size: 24px;"
-                  @click="refreshPage()"></Button>
+                      @click="refreshPage()"></Button>
-                -->
+                    -->
+                <Button aria-label="crop" v-show="model.showDownloadText" type="error" icon="md-crop"
+                  style="border-radius: 0px;font-size: 24px;" @click="saveImage(); switchMenu();"></Button>
 
                 <Button aria-label="download text" v-show="model.showDownloadText" type="error"
-                  style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); switchMenu();"
+                  style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); " icon="md-download"></Button>
-                  icon="md-download"></Button>
 
                 <Button type="error" icon="md-trash" style="border-radius: 0px;font-size: 24px;"
                   @click="showDeleteModel(); switchMenu();"></Button>
@@ -254,9 +255,9 @@
             <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
               :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
             <Card :padding="0">
-              <div id="wrapper" style="border-left: 2px solid white;">
+              <div ref="html2canvas" id="wrapper" style="border-left: 2px solid white;">
                 <Input element-id="noteText" readonly type="textarea" :border="false" v-model="noteForm.text"
-                    :autosize="{ minRows: 30, maxRows: 409600 }" :placeholder="$t('content.noteTip')" />
+                  :autosize="{ minRows: 30, maxRows: 409600 }" :placeholder="$t('content.noteTip')" />
               </div>
             </Card>
             </Col>
@@ -266,7 +267,7 @@
 
 
       <Footer class="layout-footer-center">
-        2022 &copy; flagnote.com
+        2023 &copy; flagnote.com
       </Footer>
 
     </Layout>
@@ -274,11 +275,11 @@
     <Modal v-model="model.showShare" width="360" footer-hide class-name="qrmodal" :styles="{ borderRadius: 0 }"
       @on-cancel="closeShareModel">
       <p style="text-align: center;
-          z-index: 1000;
+              z-index: 1000;
-          position: absolute;
+              position: absolute;
-          top: -2px;
+              top: -2px;
-          left: 0px;
+              left: 0px;
-          width: 100%;">
+              width: 100%;">
         <Tag style="border-radius: 0px;" v-show="model.copyTip" color="#ed4014" text="">Url Copied.</Tag>
       </p>
       <p style="text-align: center;margin-top:20px;line-height:100%">
@@ -303,7 +304,7 @@
 
       <p style="text-align: center;margin-top:10px;">
         <Button type="error" style="border-radius: 0px;font-size:19px;" @click="closeTtlDeleteModel()">{{
-            $t("button.close")
+          $t("button.close")
         }}</Button>
       </p>
     </Modal>
@@ -314,7 +315,7 @@
       </p>
       <p style="text-align: center;">
         <Button type="error" :loading="model.deleting" style="border-radius: 0px;font-size:19px;" @click="dropNote()">{{
-            $t("button.yes")
+          $t("button.yes")
         }}</Button>
       </p>
     </Modal>
@@ -325,15 +326,12 @@
       </p>
       <p style="text-align: center;">
         <Button type="error" style="border-radius: 0px;font-size: 19px;" @click="cloaseErrorMessage()">{{
-            $t("button.close")
+          $t("button.close")
         }}</Button>
       </p>
     </Modal>
 
   </div>
-
-
-
 </template>
 
 <script>
@@ -347,6 +345,7 @@ import QRCode from "qrcodejs2";
 import Clipboard from "clipboard";
 import { saveAs } from 'file-saver';
 import { isWeixin, getNoteUrl } from "@/libs/utils";
+import html2canvas from "html2canvas";
 
 export default {
   name: 'ViewNote',
@@ -553,7 +552,7 @@ export default {
       this.model.deleting = true;
       let that = this;
       deleteNote(this.noteForm.key).then(res => {
-        if (res.data&&res.data.code=="000000") {
+        if (res.data && res.data.code == "000000") {
           storage.local.delete(that.secret.storeKey);
           location.reload();
         } else {
@@ -591,7 +590,6 @@ export default {
             }
 
             var bytes = new Uint8Array(e.target.result);
-            bytes = bytes.subarray(7,bytes.length-7);
             let bytesString = bytes.join(",");
             that.noteForm.text = unwrap(bytesString, that.secret.secretKey);
             //that.noteForm.escapeText = getEscapeText(that.noteForm.text);
@@ -664,6 +662,62 @@ export default {
         }
       }
     },
+    dataURLToBlob(dataurl) {
+      let arr = dataurl.split(',');
+      let mime = arr[0].match(/:(.*?);/)[1];
+      let bstr = atob(arr[1]);
+      let n = bstr.length;
+      let u8arr = new Uint8Array(n);
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+      return new Blob([u8arr], { type: mime });
+    },
+    saveImage() {
+      let canvasID = this.$refs["html2canvas"];
+      let that = this;
+      let a = document.createElement('a');
+      html2canvas(canvasID,{
+        scale: 1, 
+        windowWidth: document.getElementById("noteText").offsetWidth,
+        onclone: (clonedDocument) => {
+          let nt = clonedDocument.getElementById("noteText");
+          const div = clonedDocument.createElement('div')
+          div.innerText = nt.value
+
+          div.style.color="black";
+          div.style.padding = "0px";
+          div.style.textAlign = "left";
+          div.style.wordBreak = "break-word";
+          div.style.whiteSpace = "pre-wrap";
+          div.style.verticalAlign = "top";
+          div.style.fontSize ="15px";
+          div.style.width= "100%";
+          div.style.border="0px";
+          div.style.fontFamily="'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif";
+
+          nt.style.display = 'none'
+
+          nt.parentElement.parentElement.style.borderLeftColor = "white";
+
+          nt.parentElement.append(div)
+        }
+      }).then(canvas => {
+        let dom = document.body.appendChild(canvas);
+        dom.style.display = 'none';
+        a.style.display = 'none';
+        document.body.removeChild(dom);
+        let blob = that.dataURLToBlob(dom.toDataURL('image/png'));
+        a.setAttribute('href', URL.createObjectURL(blob));
+        a.setAttribute('download', that.noteForm.key + '.png');
+        document.body.appendChild(a);
+        a.click();
+        URL.revokeObjectURL(blob);
+        document.body.removeChild(a);
+      });
+    },
+
+
   }
 }
 </script>

vue.config.js

@@ -23,7 +23,9 @@ module.exports = defineConfig({
       "iview": 'ViewUI',
       "file-saver": 'saveAs',
       "clipboard": "ClipboardJS",
-      "vue-i18n": "VueI18n"
+      "vue-i18n": "VueI18n",
+      "html2canvas":"html2canvas",
+      "wasm_flate":"wasm_flate"
     };
 
     // 为生产环境修改配置

yarn.lock

@@ -2047,7 +2047,7 @@ bl@^4.1.0:
     inherits "^2.0.4"
     readable-stream "^3.4.0"
 
-bluebird@^3.1.1, bluebird@^3.7.2:
+bluebird@^3.1.1:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
@@ -3743,11 +3743,6 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.1.tgz#c2b1f76cb999ede1502f3a226a9310fdfe88d46c"
   integrity sha512-d2qQLzTJ9WxQftPAuEQpSPmKqzxePjzVbpAVv62AQ64NTL+wR4JkrVqR/LqFsFEUsHDAiId52mJteHDFuDkElA==
 
-immediate@~3.0.5:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
-  integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
-
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -4150,13 +4145,6 @@ libphonenumber-js@^1.9.43:
   resolved "https://registry.yarnpkg.com/libphonenumber-js/-/libphonenumber-js-1.10.14.tgz#e29da7f539751f724ac54017a098e3c7ca23de94"
   integrity sha512-McGS7GV/WjJ2KjfOGhJU1oJn29RYeo7Q+RpANRbUNMQ9gj5XArpbjurSuyYPTejFwbaUojstQ4XyWCrAzGOUXw==
 
-lie@3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
-  integrity sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==
-  dependencies:
-    immediate "~3.0.5"
-
 lilconfig@^2.0.3:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.6.tgz#32a384558bd58af3d4c6e077dd1ad1d397bc69d4"
@@ -4190,13 +4178,6 @@ loader-utils@^2.0.0:
     emojis-list "^3.0.0"
     json5 "^2.1.2"
 
-localforage@^1.10.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.10.0.tgz#5c465dc5f62b2807c3a84c0c6a1b1b3212781dd4"
-  integrity sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==
-  dependencies:
-    lie "3.1.1"
-
 locate-path@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
@@ -6223,7 +6204,7 @@ vue-loader@^17.0.0:
     hash-sum "^2.0.0"
     loader-utils "^2.0.0"
 
-vue-router@^3.6.5:
+vue-router@^3.5.4:
   version "3.6.5"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.6.5.tgz#95847d52b9a7e3f1361cb605c8e6441f202afad8"
   integrity sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==