图片导入功能

src/views/rxcj/modules/cj.vue

@@ -103,7 +103,7 @@ export default {
           _this.thisContext.drawImage(_this.thisVideo, 0, 0, _this.videoWidth, _this.videoHeight)
 
 
-          var image = this.thisCancas.toDataURL('image/jpeg', 0.7)
+          var image = this.thisCancas.toDataURL('image/jpeg', 1)
           // var image = this.thisCancas.toDataURL('image/png')
 
           _this.imgSrc = image

src/views/rxcj/modules/cjjgOnly.vue

@@ -72,7 +72,6 @@ export default {
     border-radius: 4px;
     border: 3px solid var(--cjjgOnlyImgBorder);
     box-sizing: border-box;
-    line-height: 243px;
     text-align: center;
     &:hover {
       border: 3px solid var(--cjjgOnlyImgBorderHover);
@@ -81,6 +80,8 @@ export default {
       }
     }
     i {
+      line-height: 243px;
+
       font-size: 38px;
       font-weight: 600;
       color: var(--cjjgOnlyImgBorder);

src/views/rxcj/rxcj.vue

@@ -132,7 +132,15 @@
             <el-button
               plain
               class='an'
+              @click="fileSelect()"
             >导入图片</el-button>
+            <input
+              type="file"
+              name="fileToUpload"
+              id="fileToUpload"
+              @change="handleFiles"
+              style="display:none;"
+            />
             <el-button
               plain
               class='pz'
@@ -353,7 +361,7 @@ export default {
       this.cjjgList.forEach((item) => {
         let blob = this.dataURLtoBlob(item.content);
         let link = document.createElement('a')
-        link.download = 'zhangsan' + item.id 
+        link.download = 'zhangsan' + item.id
         link.href = URL.createObjectURL(blob);
 
         document.body.appendChild(link);
@@ -372,7 +380,40 @@ export default {
         u8arr[n] = bstr.charCodeAt(n);
       }
       return new Blob([u8arr], { type: mime });
-    }
+    },
+    fileSelect () {
+      document.getElementById("fileToUpload").click();
+    },
+    handleFiles (e) {
+      let _this = this
+      const [file] = e.target.files;
+      if (!file) {
+        return;
+      }
+      let name = file.name.split(".").splice(-1).toString();
+      if (name !== "png" && name !== "jpg") {
+        this.$message.error("文件类型错误,请重新选择文件");
+        return;
+      }
+      console.log(file)
+      var canvas = document.createElement("canvas");
+      canvas.width = 450
+      canvas.height = 600
+      var ctx = canvas.getContext("2d");
+      var img = new Image();
+      img.onload = function () {
+        ctx.drawImage(img, 0, 0, 450, 600);
+        var base64 = canvas.toDataURL('image/jpeg', 1);
+
+        console.log(base64);
+
+        _this.$refs['cj'].stopNavigator()
+        _this.cjztYl = false
+        _this.cjztImg = base64
+
+      };
+      img.src = URL.createObjectURL(e.target.files[0]);
+    },
   }
 }
 </script>