hex

storetext policies
zip first
2023-03-29 20:39:29 +08:00 · 2023-03-29 16:11:59 +08:00 · 2023-03-23 11:34:41 +08:00 · 2023-03-22 14:28:24 +08:00 · 2023-03-22 14:27:59 +08:00 · 2023-03-15 14:49:19 +08:00
13 changed files with 441 additions and 161 deletions
--- a/.env.development
+++ b/.env.development
@@ -1,6 +1,6 @@
 NODE_ENV = developement
 VUE_APP_BASE_NAME = developement
 VUE_APP_BASE_URL = http://localhost:8080
-VUE_APP_NOTE_MAX_COUNT = 409600
-VUE_APP_NOTE_MAX_DESC = 400K
+VUE_APP_NOTE_MAX_COUNT = 131072
+VUE_APP_NOTE_MAX_DESC = 128K

--- a/.env.production
+++ b/.env.production
@@ -1,5 +1,5 @@
 NODE_ENV = production
 VUE_APP_BASE_NAME = production
 VUE_APP_BASE_URL = https://flagnote.com
-VUE_APP_NOTE_MAX_COUNT = 409600
-VUE_APP_NOTE_MAX_DESC = 400K
+VUE_APP_NOTE_MAX_COUNT = 131072
+VUE_APP_NOTE_MAX_DESC = 128K
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
    "crypto-js": "^4.1.1",
    "escape-html": "^1.0.3",
    "file-saver": "^2.0.5",
+    "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
@@ -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"
--- a/public/redirect.html
+++ b/public/redirect.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="renderer" content="webkit" />
+    <meta name="force-rendering" content="webkit" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="theme-color" content="#ed4014" />
+    <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" />
+    <title>flagnote.com</title>
+    <style>
+        body {
+            background-color: #dddddd
+        }
+    </style>
+    <script>
+        const servicePath = "";
+        function ajaxGet(url) {
+            let data = null;
+            let xmlhttp = new XMLHttpRequest();
+            xmlhttp.open("GET", url, false);
+            xmlhttp.onreadystatechange = () => {
+                if (xmlhttp.readyState == 4) {
+                    if (xmlhttp.status == 200 || xmlhttp.status == 304) {
+                        if (xmlhttp.responseText) {
+                            let rs = JSON.parse(xmlhttp.responseText);
+                            if (rs && rs.code == "000000") {
+                                data = rs.data;
+                            }
+                        }
+                    }
+                }
+            };
+            xmlhttp.send();
+            return data;
+        }
+
+        function getKeyMeta() {
+            let url = servicePath + "/note/keyMeta";
+            let keyMeta = null;
+            try {
+                keyMeta = ajaxGet(url);
+            } catch (error) {
+                console.log(error);
+            }
+            return keyMeta;
+        }
+
+        let keyMeta = getKeyMeta();
+
+        if (keyMeta && keyMeta.key) {
+            sessionStorage.setItem(keyMeta.key + ".keyMeta", JSON.stringify(keyMeta));
+            location.href = "/" + keyMeta.key;
+        } else {
+            location.href = "/100006";
+        }
+    </script>
+</head>
+
+<body><noscript><strong>Please enable JavaScript to continue.</strong></noscript>
+</body>
+
+</html>
--- 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, convertHexStringToUint8Array} from "@/libs/secret";
 import NoteConstant from "@/libs/constants";

 axios.interceptors.response.use(undefined, (err) => {
@@ -48,8 +48,13 @@ export function saveNote(noteForm, secret) {
    });
  }

-  let bufferArrary = eval("[100,111,32,110,111,116,32," + note.text + ",100,111,32,101,118,105,108]");
-  let array = Uint8Array.from(bufferArrary);
+  // let bufferArrary = eval("[" + note.text + "]");
+  // let array = Uint8Array.from(bufferArrary);
+
+  // let encoder = new TextEncoder()
+  // let array = encoder.encode(note.text)
+  let array = convertHexStringToUint8Array(note.text)
+
  let blob = new Blob([array], { type: "application/octet-stream" });
  let form = new FormData();
  form.append("file", blob, noteForm.key);
--- 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/secret.js
+++ b/src/libs/secret.js
@@ -4,6 +4,43 @@ import pako from "pako";

 const wasmFlate = window.wasm_bindgen;

+
+CryptoJS.enc.Uint8Array = {
+
+  /**
+  * WordArray转Uint8Array
+  * @param wordArray
+  * @returns {Uint8Array}
+  */
+  stringify: function (wordArray) {
+    var len = wordArray.words.length,
+      u8_array = new Uint8Array(len << 2),
+      offset = 0, word, i;
+    for (i = 0; i < len; i++) {
+      word = wordArray.words[i];
+      u8_array[offset++] = word >> 24;
+      u8_array[offset++] = (word >> 16) & 0xff;
+      u8_array[offset++] = (word >> 8) & 0xff;
+      u8_array[offset++] = word & 0xff;
+    }
+    return u8_array;
+  },
+
+  /**
+  * Uint8Array转WordArray
+  * @param u8arr
+  * @returns {WordArray}
+  */
+  parse: function (u8arr) {
+    var len = u8arr.length;
+    var words = [];
+    for (var i = 0; i < len; i++) {
+      words[i >>> 2] |= (u8arr[i] & 0xff) << (24 - (i % 4) * 8);
+    }
+    return CryptoJS.lib.WordArray.create(words, len);
+  }
+};
+
 /**
 * @word 要加密的内容
 * @keyWord String  服务器随机返回的关键字
@@ -11,14 +48,14 @@ const wasmFlate = window.wasm_bindgen;

 export function wrap(text, secretKey) {
  text = "FLAGNOTE#" + text;
-  let result = aesEncrypt(text, secretKey);
-  result = noteZip(result);
+  let ui8ary = noteZip(text);
+  let result = aesEncrypt(convertUint8ArrayToWordArray(ui8ary), secretKey);
  return result;
 }

-export function unwrap(storeText, secretKey) {
-  let result = noteUnzip(storeText);
-  result = aesDecrypt(result, secretKey);
+export function unwrap(text, secretKey) {
+  let wdary = aesDecrypt(text, secretKey);
+  let result = noteUnzip(convertWordArrayToUint8Array(wdary));
  if (result.startsWith("FLAGNOTE#")) {
    return result.substring(9);
  }
@@ -37,39 +74,37 @@ export function aesEncrypt(word, keyWord) {
  let key = CryptoJS.enc.Utf8.parse(keyWord);
  let encrypted = CryptoJS.AES.encrypt(word, key, {
    mode: CryptoJS.mode.ECB,
-    padding: CryptoJS.pad.Pkcs7,
+    padding: CryptoJS.pad.ZeroPadding,
  });
-  return encrypted.toString();
+  return encrypted.ciphertext.toString();
 }

 //解密
 export function aesDecrypt(word, keyWord) {
-
  let key = CryptoJS.enc.Utf8.parse(keyWord);
-  let decrypt = CryptoJS.AES.decrypt(word, key, {
+  var srcs = CryptoJS.enc.Hex.parse(word);
+  let decrypt = CryptoJS.AES.decrypt({
+    ciphertext: srcs
+  }, key, {
    mode: CryptoJS.mode.ECB,
-    padding: CryptoJS.pad.Pkcs7,
+    padding: CryptoJS.pad.ZeroPadding,
  });
-  return CryptoJS.enc.Utf8.stringify(decrypt).toString();
+  return decrypt;
 }

 //base64 encode
-export function encode(text) {
-  return Buffer.from(text, 'utf-8').toString('base64');
-}
+// export function encode(text) {
+//   return Buffer.from(text, 'utf-8').toString('base64');
+// }

 //base64 decode
-export function decode(text) {
-  return Buffer.from(text,'base64').toString('utf-8');
-}
+// export function decode(text) {
+//   return Buffer.from(text,'base64').toString('utf-8');
+// }

-export function noteUnzip(text) {
-  let charData = text.split(",").map(function (x) {
-    return parseInt(x);
-  });
-  let binData = new Uint8Array(charData);
-  let data = unzip(binData);
-  text   = String.fromCharCode.apply(null, new Uint8Array(data));
+export function noteUnzip(wdary) {
+  let data = unzip(wdary);
+  let text = new TextDecoder().decode(data);
  return text;
 }

@@ -80,51 +115,77 @@ export function noteZip(text) {
  return text;
 }

-export function zip(data){
-   if(wasmFlate.__wbindgen_wasm_module){
+export function zip(data) {
+  if (wasmFlate.__wbindgen_wasm_module) {
    return wasmFlate.gzip_encode_raw(data);
  }

  return pako.gzip(data);
 }

-export function unzip(data){
-  if(wasmFlate.__wbindgen_wasm_module){
+export function unzip(data) {
+  if (wasmFlate.__wbindgen_wasm_module) {
    return wasmFlate.gzip_decode_raw(data);
  }

  return pako.ungzip(data);
 }

-// function convertWordArrayToUint8Array(wordArray) {
-// 	var len = wordArray.words.length,
-// 		u8_array = new Uint8Array(len << 2),
-// 		offset = 0, word, i
-// 	;
-// 	for (i=0; i<len; i++) {
-// 		word = wordArray.words[i];
-// 		u8_array[offset++] = word >> 24;
-// 		u8_array[offset++] = (word >> 16) & 0xff;
-// 		u8_array[offset++] = (word >> 8) & 0xff;
-// 		u8_array[offset++] = word & 0xff;
-// 	}
-// 	return u8_array;
-// }
+function convertWordArrayToUint8Array(wordArray) {

-// function convertUint8ArrayToWordArray(u8Array) {
-// 	var words = [], i = 0, len = u8Array.length;
+  let rr = CryptoJS.enc.Uint8Array.stringify(wordArray);
+  return rr;
+  // console.log(rr)

-// 	while (i < len) {
-// 		words.push(
-// 			(u8Array[i++] << 24) |
-// 			(u8Array[i++] << 16) |
-// 			(u8Array[i++] << 8)  |
-// 			(u8Array[i++])
-// 		);
-// 	}

-// 	return {
-// 		sigBytes: words.length * 4,
-// 		words: words
-// 	};
-// }
+  // var len = wordArray.words.length,
+  //   u8_array = new Uint8Array(len << 2),
+  //   offset = 0, word, i
+  //   ;
+  // for (i = 0; i < len; i++) {
+  //   word = wordArray.words[i];
+  //   u8_array[offset++] = word >> 24;
+  //   u8_array[offset++] = (word >> 16) & 0xff;
+  //   u8_array[offset++] = (word >> 8) & 0xff;
+  //   u8_array[offset++] = word & 0xff;
+  // }
+  // return u8_array;
+}
+
+function convertUint8ArrayToWordArray(u8Array) {
+
+  let rr = CryptoJS.enc.Uint8Array.parse(u8Array);
+  return rr;
+  // console.log(rr)
+
+  // var words = [], i = 0, len = u8Array.length;
+
+  // while (i < len) {
+  //   words.push(
+  //     (u8Array[i++] << 24) |
+  //     (u8Array[i++] << 16) |
+  //     (u8Array[i++] << 8) |
+  //     (u8Array[i++])
+  //   );
+  // }
+
+  // return {
+  //   sigBytes: words.length * 4,
+  //   words: words
+  // };
+}
+
+export function convertHexStringToUint8Array(hexString) {
+  var result = [];
+  for (var i = 0; i < hexString.length; i += 2) {
+    result.push(parseInt(hexString.substr(i, 2), 16));
+  }
+  return Uint8Array.from(result);
+  // Uint8Array.from(hexString.match(/.{1,2}/g).map((byte) => parseInt(byte, 16)));
+}
+
+export function convertUint8ArrayToHexString(byteArray) {
+  return Array.prototype.map.call(byteArray, function(byte) {
+    return ('0' + (byte & 0xFF).toString(16)).slice(-2);
+  }).join('');
+}
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,7 +4,7 @@ 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 { getKeyMeta, getNoteMeta } from "@/api/note";
+import { getNoteMeta } from "@/api/note";
 import { getStoreKey } from "@/api/lock";
 import storage from "@/libs/storage";

@@ -35,6 +35,7 @@ function getNoteView() {

  let key = path.substring(1, path.length);

+  keyMeta = storage.session.getObject(key+".keyMeta");
  if (keyMeta && keyMeta.key) {
    key = keyMeta.key;
  }
@@ -107,30 +108,7 @@ function getNoteView() {
  return ErrorNote;
 }

-function getHomeRedirect() {
-  let path = location.pathname;
-  if (path != "/") {
-    return;
-  }
-
-  //setKeyMeta
-  keyMeta = getKeyMeta();
-
-  // server error
-  if (!keyMeta) {
-    errorMeta = 100006;
-    return "/error_"+errorMeta;
-  }
-
-  return "/" + keyMeta.key;
-}
-
 const routes = [
-  {
-    path: "/",
-    name: "home",
-    redirect: getHomeRedirect(),
-  },
  { path: "/error_:code([0-9]{6})", component: ErrorNote },
  {
    path: "/:name([a-z0-9]{10,20})",
--- 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,12 @@
              <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 +143,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 +157,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 }">
@@ -197,10 +191,11 @@ import { unwrap } from '../libs/secret'
 import { saveNote } from "@/api/note";
 import { getStoreKey } from "@/api/lock";
 import storage from "@/libs/storage";
-import { setStoreText,setNewStoreText } from "@/libs/noteStorage";
+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',
@@ -235,22 +230,25 @@ export default {
      toTopState: false,
      showMenuState: false,
      showHeaderShade: false,
-      pageSession: '',
      errorInfo: '',
+      lastEditTime: 0,
+      backStoreTextInterval: null,
+      lastStoreCount: 0,
+      lastStoreTime: 0,
    }
  },
  created() {
-    this.pageSession = new Date().getTime();
+    this.editTime = new Date().getTime();

    // read $route
    this.noteForm.key = this.$route.params.name;
    let keyMeta = this.$route.meta.keyMeta;

    //ipad chrome url not redirect
-    let path = location.pathname;
-    if ("/" == path) {
-      history.pushState('', '', '/' + this.noteForm.key);
-    }
+    // let path = location.pathname;
+    // if ("/" == path) {
+    //   history.pushState('', '', '/' + this.noteForm.key);
+    // }

    //wx does not show downloadText
    this.model.showDownloadText = !isWeixin();
@@ -276,6 +274,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;
@@ -293,6 +292,10 @@ export default {
      }
    }

+    this.lastStoreCount = this.noteForm.text.length;
+    this.lastEditTime = new Date().getTime();
+    this.lastStoreTime = this.lastEditTime;
+
    this.bindCtrlAllEvent();
    this.bindToTopEvent();

@@ -313,12 +316,15 @@ export default {
    const someOtherEl = document.querySelector('#wrapper');

    myObserver.observe(someOtherEl);
+
+    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
  updated() {
  },
  beforeDestroy() {
  },
  destroyed() {
+    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
  computed: {},
  watch: {},
@@ -355,7 +361,49 @@ export default {
        return;
      }

+      let nowEditCount = this.noteForm.text.length;
+      let nowEditTime = new Date().getTime();
+
+      if (nowEditCount < 1024) {
        setStoreText(this.noteForm, this.state, this.secret);
+        this.lastStoreTime = nowEditTime;
+        this.lastStoreCount = nowEditCount;
+      } else {
+        if (null == this.backStoreTextInterval) {
+          this.backStoreTextInterval = window.setInterval(this.backStoreFunction(), 500);
+        }
+      }
+
+      this.lastEditTime = nowEditTime;
+    },
+    backStoreFunction() {
+      let that = this;
+      return function () {
+        that.backStoreText(that);
+      }
+    },
+    backStoreText(that) {
+      let nowEditCount = that.noteForm.text.length;
+      let nowEditTime = new Date().getTime();
+      if (Math.abs(nowEditCount - that.lastStoreCount) > 10) {
+        setStoreText(that.noteForm, that.state, that.secret);
+        that.lastStoreTime = that.lastEditTime;
+        that.lastStoreCount = nowEditCount;
+      } else {
+        if (nowEditTime - that.lastEditTime >= 1000 && nowEditTime - that.lastEditTime < 20000) {
+          if (that.lastEditTime != that.lastStoreTime) {
+            setStoreText(that.noteForm, that.state, that.secret);
+            that.lastStoreTime = that.lastEditTime;
+            that.lastStoreCount = nowEditCount;
+          }
+        } else if (nowEditTime - that.lastEditTime >= 20000) {
+          if (that.backStoreTextInterval != null) {
+            let ivl = that.backStoreTextInterval;
+            that.backStoreTextInterval = null;
+            window.clearInterval(ivl);
+          }
+        }
+      }
    },
    // recordEventKup(event) {
    // let tn = event.currentTarget.value;
@@ -395,7 +443,7 @@ export default {
        }

        this.noteForm.text = event.currentTarget.value;
-        setStoreText(this.noteForm, this.state, this.secret);
+        this.recordText();

      } else if (event.ctrlKey && (event.which == 13)) {
        //save
@@ -449,9 +497,9 @@ export default {
          alert(res.data.code);
          this.model.submitting = false;
          this.state.locking = 0;
-          if(res.data.code=="100013"||res.data.code=="800001"){
+          if (res.data.code == "100013" || res.data.code == "800001") {
            let key = setNewStoreText(this.noteForm);
-            location.href="/"+key;
+            location.href = "/" + key;
          }

        }
@@ -497,7 +545,65 @@ 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);
+      });
+    },
+    beforeunloadHandler() {
+      this.recordText();
+    },
  }
 }
 </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,14 +332,11 @@
    </Modal>

  </div>
-
-
-
 </template>

 <script>

-import { md5, unwrap } from "@/libs/secret";
+import { md5, unwrap, convertUint8ArrayToHexString} from "@/libs/secret";
 import { getStoreKey } from "@/api/lock";
 import { deleteNote, getNoteBlob } from "@/api/note";
 import storage from "@/libs/storage";
@@ -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 {
@@ -590,9 +589,9 @@ export default {
              return;
            }

-            var bytes = new Uint8Array(e.target.result);
-            bytes = bytes.subarray(7,bytes.length-7);
-            let bytesString = bytes.join(",");
+            // let decoder = new TextDecoder();
+            // let bytesString = decoder.decode(e.target.result);
+            let bytesString = convertUint8ArrayToHexString(new Uint8Array(e.target.result));
            that.noteForm.text = unwrap(bytesString, that.secret.secretKey);
            //that.noteForm.escapeText = getEscapeText(that.noteForm.text);

@@ -664,6 +663,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
@@ -8,7 +8,7 @@ module.exports = defineConfig({
  productionSourceMap: false,

  configureWebpack: (config) => {
-    config.experiments = { asyncWebAssembly: true,syncWebAssembly:true }
+    config.experiments = { asyncWebAssembly: true, syncWebAssembly: true }


    config.externals = {
@@ -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"
    };

    // 为生产环境修改配置
@@ -65,8 +67,8 @@ module.exports = defineConfig({
  devServer: {
    proxy: {
      "/note": {
-//        target: "https://flagnote.com/", // 后台接口域名
-        target: "http://localhost:10000/", // 后台接口域名
+        target: "https://flagnote.com/", // 后台接口域名
+        //        target: "http://localhost:10000/", // 后台接口域名
        secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin: true, //是否跨域
        pathRewrite: {
Author	SHA1	Message	Date
Jesse-Ma	9f1a0b75e3	hex	2023-03-29 20:39:29 +08:00
Jesse-Ma	0de98e660b	storetext policies	2023-03-29 16:11:59 +08:00
Jesse-Ma	b017e7bda1	zip first	2023-03-23 11:34:41 +08:00
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