diff --git a/package.json b/package.json
index 06efb07..bfbd08a 100644
--- 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",
diff --git a/src/views/EditNote.vue b/src/views/EditNote.vue
index b948726..4f94722 100644
--- a/src/views/EditNote.vue
+++ b/src/views/EditNote.vue
@@ -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" />
@@ -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',
@@ -498,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>
diff --git a/src/views/ViewNote.vue b/src/views/ViewNote.vue
index 90f0b46..7be34e2 100644
--- a/src/views/ViewNote.vue
+++ b/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="font-size: 18px;
-                    color: red;
-                    line-height: 40px;
-                    display: inline-block;
-                    font-weight: bold;
-                    height: 40px;">{{
-                        state.ttlDesc
-                    }}</div>
-              </div>
-              -->
+                  <div style="float:left;width:auto;vertical-align: center;">
+                        <div style="font-size: 18px;
+                        color: red;
+                        line-height: 40px;
+                        display: inline-block;
+                        font-weight: bold;
+                        height: 40px;">{{
+                            state.ttlDesc
+                        }}</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;"
-                  @click="refreshPage()"></Button>
-                -->
+                      <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,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>
@@ -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;
-          position: absolute;
-          top: -2px;
-          left: 0px;
-          width: 100%;">
+              z-index: 1000;
+              position: absolute;
+              top: -2px;
+              left: 0px;
+              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,7 @@ export default {
             }
 
             var bytes = new Uint8Array(e.target.result);
-            bytes = bytes.subarray(7,bytes.length-7);
+            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 +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>