图片添加文字

operationSupport/package-lock.json

@@ -1,6 +1,6 @@
 {
-  "name": "vue-manage-system",
-  "version": "4.2.8",
+  "name": "vue-manage-operation",
+  "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2789,6 +2789,11 @@
         }
       }
     },
+    "base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
+    },
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.nlark.com/base64-js/download/base64-js-1.5.1.tgz",
@@ -4063,6 +4068,14 @@
         "timsort": "^0.3.0"
       }
     },
+    "css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "css-loader": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/css-loader/download/css-loader-1.0.1.tgz?cache=0&sync_timestamp=1635967924209&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fcss-loader%2Fdownload%2Fcss-loader-1.0.1.tgz",
@@ -6172,6 +6185,15 @@
         }
       }
     },
+    "html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "requires": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      }
+    },
     "htmlparser2": {
       "version": "6.1.0",
       "resolved": "https://registry.npmmirror.com/htmlparser2/download/htmlparser2-6.1.0.tgz?cache=0&sync_timestamp=1636640940074&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fhtmlparser2%2Fdownload%2Fhtmlparser2-6.1.0.tgz",
@@ -11350,6 +11372,14 @@
         }
       }
     },
+    "text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.nlark.com/thenify/download/thenify-3.3.1.tgz",
@@ -11906,6 +11936,14 @@
       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
       "dev": true
     },
+    "utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "requires": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "uuid": {
       "version": "3.4.0",
       "resolved": "https://registry.npmmirror.com/uuid/download/uuid-3.4.0.tgz",

operationSupport/package.json

@@ -14,6 +14,7 @@
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",
     "element-ui": "^2.11.0",
+    "html2canvas": "^1.4.1",
     "mavon-editor": "^2.6.17",
     "moment": "^2.29.1",
     "node-sass": "^4.14.1",

operationSupport/src/assets/css/main.scss

@@ -775,7 +775,10 @@ div.box-40 {
     }
 }
 .QRImg {
-    text-align: center;
+    margin: auto;
+    width: 300px;
+    height: 300px;
+    position: relative;
 }
 .width100 {
     width: 100% !important;

operationSupport/src/views/deviceManagement/index.vue

@@ -71,7 +71,7 @@
             </zz-table>
         </div>
         <el-dialog title="下载二维码" :visible.sync="centerDialogVisible" width="400px">
-            <div class="QRImg">
+            <div class="QRImg" ref="QRImg">
                 <img :src="QRImg" alt="门禁设备二维码" />
                 <div>{{ DeviceName }} - {{ deviceNo }}</div>
             </div>
@@ -84,9 +84,10 @@
 
 <script>
 import list from '@utils/list.js';
+import html2canvas from 'html2canvas';
 export default {
     mixins: [list],
-    name:"deviceManagement",
+    name: 'deviceManagement',
     data() {
         let _this = this;
         return {
@@ -269,13 +270,24 @@ export default {
             });
         },
         downImg() {
-            let a = document.createElement('a');
-            a.download = `${this.DeviceName}${this.deviceNo}.png`;
-            a.href = this.QRImg;
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-            this.centerDialogVisible = !this.centerDialogVisible;
+            html2canvas(this.$refs.QRImg).then((canvas) => {
+                let dataURL = canvas.toDataURL('image/png');
+                let a = document.createElement('a');
+                a.download = `${this.DeviceName} - ${this.deviceNo}`;
+                a.href = dataURL;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                this.centerDialogVisible = !this.centerDialogVisible;
+            });
+
+            // let a = document.createElement('a');
+            // a.download = `${this.DeviceName}${this.deviceNo}.png`;
+            // a.href = this.QRImg;
+            // document.body.appendChild(a);
+            // a.click();
+            // document.body.removeChild(a);
+            // this.centerDialogVisible = !this.centerDialogVisible;
         },
         addOrEdit(todo, data = {}) {
             new Promise((resolve) => {
@@ -339,3 +351,13 @@ export default {
     }
 };
 </script>
+<style scoped lang='scss'>
+.QRImg>div{
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    text-align: center;
+    left: 50%;
+    transform: translateX(-50%);
+}
+</style>

operationSupport/src/views/deviceManagement/indexFacilities.vue

@@ -66,7 +66,7 @@
             </zz-table>
         </div>
         <el-dialog title="下载二维码" :visible.sync="centerDialogVisible" width="400px">
-            <div class="QRImg">
+            <div class="QRImg" ref="QRImg">
                 <img :src="QRImg" alt="设施二维码" />
                 <div>{{ facilityName }} - {{ facilityNo }}</div>
             </div>
@@ -79,9 +79,10 @@
 
 <script>
 import list from '@utils/list.js';
+import html2canvas from 'html2canvas';
 export default {
     mixins: [list],
-    name:'deviceManagementIndexFacilities',
+    name: 'deviceManagementIndexFacilities',
     data() {
         const _this = this;
         return {
@@ -167,7 +168,7 @@ export default {
             centerDialogVisible: false,
             QRImg: '',
             facilityNo: '',
-            facilityName:"",
+            facilityName: ''
         };
     },
     created() {
@@ -242,13 +243,24 @@ export default {
             });
         },
         downImg() {
-            let a = document.createElement('a');
-            a.download = `${this.facilityName}${this.facilityNo}.png`;
-            a.href = this.QRImg;
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-            this.centerDialogVisible = !this.centerDialogVisible;
+            html2canvas(this.$refs.QRImg).then((canvas) => {
+                let dataURL = canvas.toDataURL('image/png');
+                let a = document.createElement('a');
+                a.download = `${this.facilityName} - ${this.facilityNo}`;
+                a.href = dataURL;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                this.centerDialogVisible = !this.centerDialogVisible;
+            });
+
+            // let a = document.createElement('a');
+            // a.download = `${this.facilityName}${this.facilityNo}.png`;
+            // a.href = this.QRImg;
+            // document.body.appendChild(a);
+            // a.click();
+            // document.body.removeChild(a);
+            // this.centerDialogVisible = !this.centerDialogVisible;
         },
         addOrEdit(todo, data = {}) {
             new Promise((resolve) => {
@@ -311,4 +323,14 @@ export default {
         }
     }
 };
-</script>
+</script>
+<style scoped lang='scss'>
+.QRImg > div {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    text-align: center;
+    left: 50%;
+    transform: translateX(-50%);
+}
+</style>