qrcode

src/views/ViewNote.vue

@@ -68,6 +68,12 @@
 </style>
 
 <style>
+#qrImg img {
+  margin: auto;
+  width: 203px;
+  height: 203px;
+}
+
 #qrUrl {
   color: #ed4014;
   font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
@@ -267,9 +273,9 @@
         </span><span id="qrUrl">{{ noteForm.noteUrl }}</span>
       </p>
 
-      <p style="text-align: center;margin-top:5px;">
-        <canvas id="qrImg" class=""></canvas>
-      </p>
+      <div style="text-align: center;margin-top:10px;">
+        <div id="qrImg"></div>
+      </div>
       <p style="text-align: center;margin-top:10px;">
         <Button type="error" style="border-radius: 0px;font-size:19px;" @click="closeShareModel()">{{ $t("button.close")
         }}</Button>
@@ -311,7 +317,7 @@ import { getStoreKey, getSecretKey } from "@/api/lock";
 import { deleteNote, getNoteBlob } from "@/api/note";
 import storage from "@/libs/storage";
 import { getEscapeText } from "@/libs/noteStorage";
-import QRCode from "qrcode";
+import QRCode from "qrcodejs2";
 import Clipboard from "clipboard";
 import { saveAs } from 'file-saver';
 import { isWeixin, getNoteUrl } from "@/libs/utils";
@@ -423,6 +429,18 @@ export default {
     const someOtherEl = document.querySelector('#wrapper');
     myObserver.observe(someOtherEl);
 
+    let qrimg = document.getElementById("qrImg");
+    let qrurl = "https://flagnote.com/" + this.noteForm.key;
+    var opts = {
+      text: qrurl,
+      height: 203,
+      width: 203,
+      colorDark: "#ed4014",
+      colorLight: "#FFFFFF",
+      correctLevel: QRCode.CorrectLevel.M
+    }
+    new QRCode(qrimg, opts);
+
   },
   updated() {
   },
@@ -488,28 +506,10 @@ export default {
     },
     showShareModel() {
       this.model.showShare = true;
-      let qrimg = document.getElementById("qrImg");
-      let qrurl = "https://flagnote.com/" + this.noteForm.key;
-      var opts = {
-        errorCorrectionLevel: 'Q',
-        type: 'image/jpeg',
-        quality: 0.9,
-        height: 192,
-        width: 192,
-        margin: 1,
-        color: {
-          dark: "#ed4014",
-          light: "#FFFFFF"
-        }
-      }
-      QRCode.toCanvas(qrimg, qrurl, opts)
-
       storage.session.setText(this.secret.storeKey + "_share", '1');
     },
     closeShareModel() {
-      if (this.model.showShare) {
-        this.model.showShare = false;
-      }
+      this.model.showShare = false;
       storage.session.setText(this.secret.storeKey + "_share", '0');
     },
     showDeleteModel() {