compact

add html2canvas
2023-03-22 14:28:24 +08:00 · 2023-03-22 14:27:59 +08:00 · 2023-03-15 14:49:19 +08:00 · 2023-03-14 14:21:23 +08:00
15 changed files with 1248 additions and 21816 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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",
--- a/public/index.html
+++ b/public/index.html
@@ -24,29 +24,31 @@
      background-color: #dddddd
    }
  </style>
-  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"
+  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js" rel="stylesheet"
    type="text/javascript"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vue-router@3.6.5/dist/vue-router.min.js"
+  <script src="https://cdn.jsdelivr.net/npm/vue-router@3.6.5/dist/vue-router.min.js" rel="stylesheet"
    type="text/javascript"></script>
-  <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"
+  <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js" rel="stylesheet"
    type="text/javascript"></script>
-  <script src="https://cdn.jsdelivr.net/npm/view-design@4.7.0/dist/iview.min.js"
+  <script src="https://cdn.jsdelivr.net/npm/view-design@4.7.0/dist/iview.min.js" rel="stylesheet"
    type="text/javascript"></script>
-  <script src="https://cdn.jsdelivr.net/npm/pako@2.1.0/dist/pako.min.js"
+  <script src="https://cdn.jsdelivr.net/npm/pako@2.1.0/dist/pako.min.js" rel="stylesheet"
    type="text/javascript"></script>
-  <script src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/crypto-js.min.js"
+  <script src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/crypto-js.min.js" rel="stylesheet"
    type="text/javascript"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vue-i18n@8.21.1/dist/vue-i18n.min.js"
+  <script src="https://cdn.jsdelivr.net/npm/vue-i18n@8.21.1/dist/vue-i18n.min.js" rel="stylesheet"
    type="text/javascript"></script>
-  <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"
+  <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js" rel="stylesheet"
    type="text/javascript"></script>
-  <script src="https://cdn.jsdelivr.net/npm/qrcodejs2@0.0.2/qrcode.min.js"
+  <script src="https://cdn.jsdelivr.net/npm/qrcodejs2@0.0.2/qrcode.min.js" rel="stylesheet"
    type="text/javascript"></script>
-  <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"
+  <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"
+  <script src="https://cdn.jsdelivr.net/npm/wasm-flate@1.0.2-browser/wasm_flate.min.js" rel="stylesheet"
    type="text/javascript"></script>
-  <script type="text/javascript">
+  <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"
  </script>

--- a/public/redirect.html
+++ b/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) {
+            sessionStorage.setItem(keyMeta.key + ".keyMeta", JSON.stringify(keyMeta));
            location.href = "/" + keyMeta.key;
+        } else {
+            location.href = "/100006";
+        }
    </script>
 </head>

--- a/src/api/note.js
+++ b/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;
--- a/src/i18n/config/zh.js
+++ b/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;
--- a/src/libs/noteStorage.js
+++ b/src/libs/noteStorage.js
@@ -1,3 +1,4 @@
+import { getKeyMeta } from "@/api/note";
 import { getStoreKey } from "@/api/lock";
 import { wrap } from "@/libs/secret";
 import storage from "@/libs/storage";
@@ -11,7 +12,7 @@ export function setStoreText(noteForm, state, secret) {
    storeText = wrap(text, secret.secretKey);
  }

-  return storage.local.setText(
+  storage.local.setText(
    secret.storeKey,
    state.lock +
      "|" +
@@ -25,7 +26,8 @@ export function setStoreText(noteForm, state, secret) {
  );
 }

-export function setNewStoreText(noteForm,keyMeta) {
+export function setNewStoreText(noteForm) {
+  let keyMeta =getKeyMeta();
  let storeKey = getStoreKey(keyMeta.key);

  let text = noteForm.text;
@@ -36,7 +38,7 @@ export function setNewStoreText(noteForm,keyMeta) {
    storeText = wrap(text, keyMeta.secretKey);
  }

-  return storage.local.setText(
+  storage.local.setText(
    storeKey,
      "0|" +
      keyMeta.cipher +
@@ -45,6 +47,8 @@ export function setNewStoreText(noteForm,keyMeta) {
      "|" +
      storeText
  );
+
+  return keyMeta.key;
 }

 export function clearStoreText(key) {
--- a/src/libs/storage.js
+++ b/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() {
--- a/src/main.js
+++ b/src/main.js
@@ -1,15 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
-import getRouter from './router/'
+import router from './router'
 import axios from 'axios'
 import VueAxios from 'vue-axios'
 import './plugins/iview.js'
-import {Promise} from "bluebird";
 import i18n from './i18n/'
-
 import NoteConstant from "@/libs/constants";

-
 axios.defaults.baseURL = NoteConstant.servicePath;

 Vue.use(VueAxios, axios)
@@ -19,12 +16,10 @@ Vue.config.debug = debugFlag;
 Vue.config.devtools = debugFlag;
 Vue.config.productionTip = debugFlag;

-Promise.try(getRouter).then((router)=>{
-    new Vue({
+new Vue({
    i18n,
    router,
    render: h => h(App)
-    }).$mount('#app')
-});
+}).$mount('#app')


--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,60 +1,74 @@
-import { getNoteMetaNew } from "@/api/note";
+import Vue from "vue";
 import VueRouter from "vue-router";
 import EditNote from "@/views/EditNote.vue";
 import ViewNote from "@/views/ViewNote.vue";
+import ErrorRoute from "@/views/ErrorRoute.vue";
 import ErrorNote from "@/views/ErrorNote.vue";
-import storage from "@/libs/storage";
+import { getNoteMeta } from "@/api/note";
 import { getStoreKey } from "@/api/lock";
+import storage from "@/libs/storage";

+Vue.use(VueRouter);

-export default async function getRouter() {
-    let path = location.pathname;
-    let key = path.substring(1, path.length);
-    //let errorMeta = null;
+var keyMeta = null;
+var noteMeta = null;
+var errorMeta = null;

-    if (path == "/") {
-        //errorMeta = 100002;
-        return errorRouter(100002);
+function getKeyMetaParam() {
+  return keyMeta;
+}
+
+function getNoteMetaParam() {
+  return noteMeta;
+}
+
+function getErrorMetaParam() {
+  return errorMeta;
+}
+
+function getNoteView() {
+  if (errorMeta) {
+    return;
  }

-    let keyMeta = storage.session.getObject("keyMeta");
-    storage.session.delete("keyMeta");
+  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)) {
-        return errorRouter(100002);
+    errorMeta = 100002;
+    return ErrorNote;
  }

  if (keyMeta && keyMeta.key) {
-        // if(document.referrer=="/"){
-        // }
-        return noteRouter(EditNote, keyMeta, null);
+    //firstEdit
+    return EditNote;
  }

-    let resp = await getNoteMetaNew(key);
+  //set noteMeta
+  noteMeta = getNoteMeta(key);

-
-    if (null == resp || null == resp.data) {
-        return errorRouter(100006);
+  //server error
+  if (!noteMeta) {
+    errorMeta = 100006;
+    return ErrorNote;
  }

-    let result = resp.data;
-    if (result.code != '000000') {
-        return errorRouter(parseInt(result.code));
+  //invalidated key
+  if (!noteMeta.key) {
+    errorMeta = 100002;
+    return ErrorNote;
  }

-    let noteMeta = result.data;
-    if (null == noteMeta) {
-        return errorRouter(100001);
-    }
-    if (null == noteMeta.key) {
-        return errorRouter(100002);
-    }
-
-    //view
+  //validated state
  if (1 == noteMeta.state) {
-        return noteRouter(ViewNote, keyMeta, noteMeta);
+    return ViewNote;
  }

  //deleted
@@ -63,69 +77,51 @@ export default async function getRouter() {
    storage.local.delete(storeKey);
    // user deleted
    if (noteMeta.ttl > 0) {
-            // errorMeta = 100003;
-            return errorRouter(100003);
+      errorMeta = 100003;
+      return ErrorNote;
    } else {// timeout
-            // errorMeta = 100004;
-            return errorRouter(100004);
+      errorMeta = 100004;
+      return ErrorNote;
    }
  }

-    //edit or unsubmitted
  if (null == noteMeta.state) {
    let storeKey = getStoreKey(key);
-        const storeInfo = await storage.local.getText(storeKey);
-
    //if has storage , then edit
-        if (null != storeInfo) {
-            return noteRouter(EditNote, keyMeta, noteMeta);
-        }
-
+    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 errorRouter(100003);
+        errorMeta = 100003;
+        return ErrorNote;
      } else {//unsubmitted
-            // errorMeta = 100005;
-            return errorRouter(100005);
+        errorMeta = 100005;
+        return ErrorNote;
      }
    }
-    return errorRouter(100001);
+  }
+
+  // other exception
+  errorMeta = 100001;
+  return ErrorNote;
 }

-function noteRouter(noteView, keyMeta, noteMeta) {
-    const routes = [
+const routes = [
+  { path: "/error_:code([0-9]{6})", component: ErrorNote },
  {
    path: "/:name([a-z0-9]{10,20})",
    name: "note",
-            component: noteView,
-            meta: { keyMeta: keyMeta, noteMeta: noteMeta },
-        }
-    ];
+    component: getNoteView(),
+    meta: { keyMeta: getKeyMetaParam(), noteMeta: getNoteMetaParam(), errorMeta: getErrorMetaParam() },
+  },
+  { path: "/:path(.*)", component: ErrorRoute }
+];

-    const router = new VueRouter({
+const router = new VueRouter({
  routes,
  mode: "history",
-    });
-    return router;
-}
-
-
-function errorRouter(errorCode) {
-    const routes = [
-        {
-            path: "/:name([a-z0-9]{10,20})",
-            name: "error",
-            component: ErrorNote,
-            errorMeta: errorCode
-        }
-    ];
-
-    const router = new VueRouter({
-        routes,
-        mode: "history",
-    });
-    return router;
-}
+});

+export default router;
--- a/src/views/EditNote.vue
+++ b/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;"
-                    @click="refreshPage()"></Button>
-                  -->
+                <Button aria-label="crop" v-show="model.showDownloadText" type="error" 
+                 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(); "
-                  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(); "
+                  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,7 +196,7 @@ import { setStoreText,setNewStoreText } from "@/libs/noteStorage";
 import { saveAs } from 'file-saver';
 import { isWeixin } from "@/libs/utils";
 import NoteConstant from "@/libs/constants";
-import { getKeyMeta } from "@/api/note";
+import html2canvas from "html2canvas";

 export default {
  name: 'EditNote',
@@ -277,25 +272,22 @@ 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;
      this.secret.secretKey = noteMeta.secretKey;

-      let that = this;
-
-      storage.local.getText(storeKey).then(function(storeInfo){
+      let storeInfo = storage.local.getText(storeKey);
      let starray = storeInfo.split('|');
-        that.state.lock = parseInt(starray[0]);
-        that.secret.cipher = starray[1];
-        that.state.initTime = parseInt(starray[3]);
+      this.state.lock = parseInt(starray[0]);
+      this.secret.cipher = starray[1];
+      this.state.initTime = parseInt(starray[3]);

      //draw text;
      if (starray[4]) {
-          that.noteForm.text = unwrap(starray[4], that.secret.secretKey);
+        this.noteForm.text = unwrap(starray[4], this.secret.secretKey);
      }
-      });
-
    }

    this.bindCtrlAllEvent();
@@ -403,10 +395,13 @@ export default {
        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) {
@@ -435,28 +430,25 @@ export default {
        return;
      }

-      setStoreText(this.noteForm, this.state, this.secret);
-
      this.model.submitting = true;

      let that = this;
-      saveNote(this.noteForm, this.secret).then(res => {
+      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).then(function(){
+          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 keyMeta = getKeyMeta();
-            setNewStoreText(this.noteForm,keyMeta).then(function () {
-              location.href="/"+keyMeta.key;
-            });
+            let key = setNewStoreText(this.noteForm);
+            location.href="/"+key;
          }

        }
@@ -502,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>
--- a/src/views/ErrorNote.vue
+++ b/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>
--- a/src/views/ViewNote.vue
+++ b/src/views/ViewNote.vue
@@ -220,7 +220,7 @@
            <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>

                <!--
@@ -228,10 +228,11 @@
                      <Button type="error" icon="md-refresh" style="border-radius: 0px;font-size: 24px;"
                      @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();"
-                  icon="md-download"></Button>
+                  style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); " icon="md-download"></Button>

                <Button type="error" icon="md-trash" style="border-radius: 0px;font-size: 24px;"
                  @click="showDeleteModel(); switchMenu();"></Button>
@@ -254,7 +255,7 @@
            <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')" />
              </div>
@@ -266,7 +267,7 @@


      <Footer class="layout-footer-center">
-        2022 &copy; flagnote.com
+        2023 &copy; flagnote.com
      </Footer>

    </Layout>
@@ -331,9 +332,6 @@
    </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',
@@ -420,14 +419,10 @@ export default {

      this.startClock();

-      
-      let that = this;
-      storage.local.getText(this.secret.storeKey).then(function(storeInfo){
-        that.loadText(storeInfo);
-      });
-
      storage.local.dynamicClear();

+      this.loadText();
+
      this.bindCtrlAllEvent();
      this.bindCopyUrlEvent();
      this.bindToTopEvent();
@@ -521,9 +516,8 @@ export default {
        that.state.ttl = that.state.initTtl - (new Date().getTime() - that.state.initTime);

        if (that.state.ttl <= 0) {
-          storage.local.delete(that.secret.storeKey).then(function(){
+          storage.local.delete(that.secret.storeKey);
          location.reload();
-          });
        }
      }, 1000)
    },
@@ -558,10 +552,9 @@ export default {
      this.model.deleting = true;
      let that = this;
      deleteNote(this.noteForm.key).then(res => {
-        if (res.data&&res.data.code=="000000") {
-          storage.local.delete(that.secret.storeKey).then(function(){
+        if (res.data && res.data.code == "000000") {
+          storage.local.delete(that.secret.storeKey);
          location.reload();
-          });
        } else {
          that.model.deleting = false;
        }
@@ -569,9 +562,11 @@ export default {
        alert(error);
      });
    },
-    loadText(storeInfo) {
+    loadText() {
      let that = this;

+      let storeInfo = storage.local.getText(this.secret.storeKey);
+
      let starray = [];
      if (storeInfo) {
        starray = storeInfo.split('|');
@@ -595,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);
@@ -668,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>
--- a/vue.config.js
+++ b/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"
    };

    // 为生产环境修改配置
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Jesse-Ma	b31563aaab	compact	2023-03-22 14:28:24 +08:00
Jesse-Ma	bb7085adaa	compact	2023-03-22 14:27:59 +08:00
Jesse-Ma	67035a0abf	add html2canvas	2023-03-15 14:49:19 +08:00
Jesse-Ma	b86cf176dd	redirect done	2023-03-14 14:21:23 +08:00