camera

package-lock.json

@@ -50,7 +50,7 @@
     },
     "acorn-globals": {
       "version": "4.3.4",
-      "resolved": "https://registry.npm.taobao.org/acorn-globals/download/acorn-globals-4.3.4.tgz",
+      "resolved": "https://registry.nlark.com/acorn-globals/download/acorn-globals-4.3.4.tgz",
       "integrity": "sha1-n6GSat3BHJcwjE5m163Q1Awycuc=",
       "requires": {
         "acorn": "^6.0.1",
@@ -59,14 +59,14 @@
       "dependencies": {
         "acorn": {
           "version": "6.4.2",
-          "resolved": "https://registry.nlark.com/acorn/download/acorn-6.4.2.tgz",
+          "resolved": "https://registry.nlark.com/acorn/download/acorn-6.4.2.tgz?cache=0&sync_timestamp=1624526855420&other_urls=https%3A%2F%2Fregistry.nlark.com%2Facorn%2Fdownload%2Facorn-6.4.2.tgz",
           "integrity": "sha1-NYZv1xBSjpLeEM8GAWSY5H454eY="
         }
       }
     },
     "acorn-walk": {
       "version": "6.2.0",
-      "resolved": "https://registry.nlark.com/acorn-walk/download/acorn-walk-6.2.0.tgz",
+      "resolved": "https://registry.nlark.com/acorn-walk/download/acorn-walk-6.2.0.tgz?cache=0&sync_timestamp=1624951990736&other_urls=https%3A%2F%2Fregistry.nlark.com%2Facorn-walk%2Fdownload%2Facorn-walk-6.2.0.tgz",
       "integrity": "sha1-Ejy487hMIXHx9/slJhWxx4prGow="
     },
     "ajv": {
@@ -341,7 +341,7 @@
     },
     "aws-sign2": {
       "version": "0.7.0",
-      "resolved": "https://registry.npm.taobao.org/aws-sign2/download/aws-sign2-0.7.0.tgz?cache=0&sync_timestamp=1589682812085&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faws-sign2%2Fdownload%2Faws-sign2-0.7.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/aws-sign2/download/aws-sign2-0.7.0.tgz",
       "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg="
     },
     "aws4": {
@@ -1275,7 +1275,7 @@
     },
     "bcrypt-pbkdf": {
       "version": "1.0.2",
-      "resolved": "https://registry.npm.taobao.org/bcrypt-pbkdf/download/bcrypt-pbkdf-1.0.2.tgz?cache=0&sync_timestamp=1589682746075&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbcrypt-pbkdf%2Fdownload%2Fbcrypt-pbkdf-1.0.2.tgz",
+      "resolved": "https://registry.npm.taobao.org/bcrypt-pbkdf/download/bcrypt-pbkdf-1.0.2.tgz",
       "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
       "requires": {
         "tweetnacl": "^0.14.3"
@@ -1418,7 +1418,7 @@
     },
     "browser-process-hrtime": {
       "version": "1.0.0",
-      "resolved": "https://registry.npm.taobao.org/browser-process-hrtime/download/browser-process-hrtime-1.0.0.tgz",
+      "resolved": "https://registry.nlark.com/browser-process-hrtime/download/browser-process-hrtime-1.0.0.tgz",
       "integrity": "sha1-PJtLfXgsgSHlbxAQbYTA0P/JRiY="
     },
     "browserify-aes": {
@@ -3301,7 +3301,7 @@
     },
     "cssom": {
       "version": "0.4.4",
-      "resolved": "https://registry.nlark.com/cssom/download/cssom-0.4.4.tgz",
+      "resolved": "https://registry.nlark.com/cssom/download/cssom-0.4.4.tgz?cache=0&sync_timestamp=1624218957158&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcssom%2Fdownload%2Fcssom-0.4.4.tgz",
       "integrity": "sha1-WmbPk9LQtmHYC/akT7ZfXC5OChA="
     },
     "cssstyle": {
@@ -3314,7 +3314,7 @@
       "dependencies": {
         "cssom": {
           "version": "0.3.8",
-          "resolved": "https://registry.nlark.com/cssom/download/cssom-0.3.8.tgz",
+          "resolved": "https://registry.nlark.com/cssom/download/cssom-0.3.8.tgz?cache=0&sync_timestamp=1624218957158&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcssom%2Fdownload%2Fcssom-0.3.8.tgz",
           "integrity": "sha1-nxJ29bK0Y/IRTT8sdSUK+MGjb0o="
         }
       }
@@ -3712,7 +3712,7 @@
     },
     "ecc-jsbn": {
       "version": "0.1.2",
-      "resolved": "https://registry.npm.taobao.org/ecc-jsbn/download/ecc-jsbn-0.1.2.tgz?cache=0&sync_timestamp=1589682745945&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fecc-jsbn%2Fdownload%2Fecc-jsbn-0.1.2.tgz",
+      "resolved": "https://registry.npm.taobao.org/ecc-jsbn/download/ecc-jsbn-0.1.2.tgz",
       "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
       "requires": {
         "jsbn": "~0.1.0",
@@ -3977,7 +3977,7 @@
     },
     "escodegen": {
       "version": "1.14.3",
-      "resolved": "https://registry.npm.taobao.org/escodegen/download/escodegen-1.14.3.tgz?cache=0&sync_timestamp=1596669832613&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fescodegen%2Fdownload%2Fescodegen-1.14.3.tgz",
+      "resolved": "https://registry.npm.taobao.org/escodegen/download/escodegen-1.14.3.tgz",
       "integrity": "sha1-TnuB+6YVgdyXWC7XjKt/Do1j9QM=",
       "requires": {
         "esprima": "^4.0.1",
@@ -3989,12 +3989,12 @@
       "dependencies": {
         "esprima": {
           "version": "4.0.1",
-          "resolved": "https://registry.npm.taobao.org/esprima/download/esprima-4.0.1.tgz?cache=0&sync_timestamp=1589682833047&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fesprima%2Fdownload%2Fesprima-4.0.1.tgz",
+          "resolved": "https://registry.npm.taobao.org/esprima/download/esprima-4.0.1.tgz",
           "integrity": "sha1-E7BM2z5sXRnfkatph6hpVhmwqnE="
         },
         "source-map": {
           "version": "0.6.1",
-          "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz?cache=0&sync_timestamp=1589682764497&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsource-map%2Fdownload%2Fsource-map-0.6.1.tgz",
+          "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
           "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
           "optional": true
         }
@@ -4225,7 +4225,7 @@
     },
     "extend": {
       "version": "3.0.2",
-      "resolved": "https://registry.npm.taobao.org/extend/download/extend-3.0.2.tgz?cache=0&sync_timestamp=1589682707348&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fextend%2Fdownload%2Fextend-3.0.2.tgz",
+      "resolved": "https://registry.npm.taobao.org/extend/download/extend-3.0.2.tgz",
       "integrity": "sha1-+LETa0Bx+9jrFAr/hYsQGewpFfo="
     },
     "extend-shallow": {
@@ -4637,7 +4637,7 @@
     },
     "getpass": {
       "version": "0.1.7",
-      "resolved": "https://registry.npm.taobao.org/getpass/download/getpass-0.1.7.tgz?cache=0&sync_timestamp=1589682745510&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fgetpass%2Fdownload%2Fgetpass-0.1.7.tgz",
+      "resolved": "https://registry.npm.taobao.org/getpass/download/getpass-0.1.7.tgz",
       "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
       "requires": {
         "assert-plus": "^1.0.0"
@@ -4729,7 +4729,7 @@
     },
     "har-validator": {
       "version": "5.1.5",
-      "resolved": "https://registry.npm.taobao.org/har-validator/download/har-validator-5.1.5.tgz?cache=0&sync_timestamp=1596082584903&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhar-validator%2Fdownload%2Fhar-validator-5.1.5.tgz",
+      "resolved": "https://registry.npm.taobao.org/har-validator/download/har-validator-5.1.5.tgz",
       "integrity": "sha1-HwgDufjLIMD6E4It8ezds2veHv0=",
       "requires": {
         "ajv": "^6.12.3",
@@ -5104,7 +5104,7 @@
     },
     "http-signature": {
       "version": "1.2.0",
-      "resolved": "https://registry.npm.taobao.org/http-signature/download/http-signature-1.2.0.tgz?cache=0&sync_timestamp=1600868452638&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhttp-signature%2Fdownload%2Fhttp-signature-1.2.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/http-signature/download/http-signature-1.2.0.tgz",
       "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
       "requires": {
         "assert-plus": "^1.0.0",
@@ -5627,7 +5627,7 @@
     },
     "jsbn": {
       "version": "0.1.1",
-      "resolved": "https://registry.npm.taobao.org/jsbn/download/jsbn-0.1.1.tgz?cache=0&sync_timestamp=1589682745609&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjsbn%2Fdownload%2Fjsbn-0.1.1.tgz",
+      "resolved": "https://registry.npm.taobao.org/jsbn/download/jsbn-0.1.1.tgz",
       "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM="
     },
     "jsdom": {
@@ -5665,7 +5665,7 @@
       "dependencies": {
         "acorn": {
           "version": "7.4.1",
-          "resolved": "https://registry.nlark.com/acorn/download/acorn-7.4.1.tgz",
+          "resolved": "https://registry.nlark.com/acorn/download/acorn-7.4.1.tgz?cache=0&sync_timestamp=1624526855420&other_urls=https%3A%2F%2Fregistry.nlark.com%2Facorn%2Fdownload%2Facorn-7.4.1.tgz",
           "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo="
         },
         "ws": {
@@ -5705,7 +5705,7 @@
     },
     "json-stringify-safe": {
       "version": "5.0.1",
-      "resolved": "https://registry.npm.taobao.org/json-stringify-safe/download/json-stringify-safe-5.0.1.tgz?cache=0&sync_timestamp=1589682771374&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjson-stringify-safe%2Fdownload%2Fjson-stringify-safe-5.0.1.tgz",
+      "resolved": "https://registry.npm.taobao.org/json-stringify-safe/download/json-stringify-safe-5.0.1.tgz",
       "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
     },
     "json3": {
@@ -5849,7 +5849,7 @@
     },
     "lodash.sortby": {
       "version": "4.7.0",
-      "resolved": "https://registry.npm.taobao.org/lodash.sortby/download/lodash.sortby-4.7.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/lodash.sortby/download/lodash.sortby-4.7.0.tgz?cache=0&sync_timestamp=1589683608371&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash.sortby%2Fdownload%2Flodash.sortby-4.7.0.tgz",
       "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg="
     },
     "lodash.uniq": {
@@ -6573,7 +6573,7 @@
     },
     "oauth-sign": {
       "version": "0.9.0",
-      "resolved": "https://registry.npm.taobao.org/oauth-sign/download/oauth-sign-0.9.0.tgz?cache=0&sync_timestamp=1589682811909&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Foauth-sign%2Fdownload%2Foauth-sign-0.9.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/oauth-sign/download/oauth-sign-0.9.0.tgz",
       "integrity": "sha1-R6ewFrqmi1+g7PPe4IqFxnmsZFU="
     },
     "object-assign": {
@@ -6937,7 +6937,7 @@
     },
     "parse5": {
       "version": "5.1.0",
-      "resolved": "https://registry.npm.taobao.org/parse5/download/parse5-5.1.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/parse5/download/parse5-5.1.0.tgz?cache=0&sync_timestamp=1595849263958&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fparse5%2Fdownload%2Fparse5-5.1.0.tgz",
       "integrity": "sha1-xZNByXI/QUxFKXVWTHwApo1YrNI="
     },
     "parseurl": {
@@ -9731,7 +9731,7 @@
     },
     "request": {
       "version": "2.88.2",
-      "resolved": "https://registry.npm.taobao.org/request/download/request-2.88.2.tgz?cache=0&sync_timestamp=1589682741998&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Frequest%2Fdownload%2Frequest-2.88.2.tgz",
+      "resolved": "https://registry.npm.taobao.org/request/download/request-2.88.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Frequest%2Fdownload%2Frequest-2.88.2.tgz",
       "integrity": "sha1-1zyRhzHLWofaBH4gcjQUb2ZNErM=",
       "requires": {
         "aws-sign2": "~0.7.0",
@@ -9758,12 +9758,12 @@
       "dependencies": {
         "qs": {
           "version": "6.5.2",
-          "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz?cache=0&sync_timestamp=1616385315895&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fqs%2Fdownload%2Fqs-6.5.2.tgz",
+          "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz?cache=0&sync_timestamp=1616385281714&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fqs%2Fdownload%2Fqs-6.5.2.tgz",
           "integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY="
         },
         "tough-cookie": {
           "version": "2.5.0",
-          "resolved": "https://registry.npm.taobao.org/tough-cookie/download/tough-cookie-2.5.0.tgz?cache=0&sync_timestamp=1589682815640&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftough-cookie%2Fdownload%2Ftough-cookie-2.5.0.tgz",
+          "resolved": "https://registry.npm.taobao.org/tough-cookie/download/tough-cookie-2.5.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftough-cookie%2Fdownload%2Ftough-cookie-2.5.0.tgz",
           "integrity": "sha1-zZ+yoKodWhK0c72fuW+j3P9lreI=",
           "requires": {
             "psl": "^1.1.28",
@@ -9774,7 +9774,7 @@
     },
     "request-promise-core": {
       "version": "1.1.4",
-      "resolved": "https://registry.npm.taobao.org/request-promise-core/download/request-promise-core-1.1.4.tgz?cache=0&sync_timestamp=1595378681719&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Frequest-promise-core%2Fdownload%2Frequest-promise-core-1.1.4.tgz",
+      "resolved": "https://registry.npm.taobao.org/request-promise-core/download/request-promise-core-1.1.4.tgz",
       "integrity": "sha1-Pu3UIjII1BmGe3jOgVFn0QWToi8=",
       "requires": {
         "lodash": "^4.17.19"
@@ -9792,7 +9792,7 @@
       "dependencies": {
         "tough-cookie": {
           "version": "2.5.0",
-          "resolved": "https://registry.npm.taobao.org/tough-cookie/download/tough-cookie-2.5.0.tgz?cache=0&sync_timestamp=1589682815640&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftough-cookie%2Fdownload%2Ftough-cookie-2.5.0.tgz",
+          "resolved": "https://registry.npm.taobao.org/tough-cookie/download/tough-cookie-2.5.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftough-cookie%2Fdownload%2Ftough-cookie-2.5.0.tgz",
           "integrity": "sha1-zZ+yoKodWhK0c72fuW+j3P9lreI=",
           "requires": {
             "psl": "^1.1.28",
@@ -10973,7 +10973,7 @@
     },
     "tough-cookie": {
       "version": "3.0.1",
-      "resolved": "https://registry.npm.taobao.org/tough-cookie/download/tough-cookie-3.0.1.tgz?cache=0&sync_timestamp=1589682815640&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftough-cookie%2Fdownload%2Ftough-cookie-3.0.1.tgz",
+      "resolved": "https://registry.npm.taobao.org/tough-cookie/download/tough-cookie-3.0.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftough-cookie%2Fdownload%2Ftough-cookie-3.0.1.tgz",
       "integrity": "sha1-nfT1fnOcJpMKAYGEiH9K233Kc7I=",
       "requires": {
         "ip-regex": "^2.1.0",
@@ -11023,7 +11023,7 @@
     },
     "tweetnacl": {
       "version": "0.14.5",
-      "resolved": "https://registry.npm.taobao.org/tweetnacl/download/tweetnacl-0.14.5.tgz?cache=0&sync_timestamp=1589682745749&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftweetnacl%2Fdownload%2Ftweetnacl-0.14.5.tgz",
+      "resolved": "https://registry.npm.taobao.org/tweetnacl/download/tweetnacl-0.14.5.tgz",
       "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
     },
     "type": {
@@ -12289,7 +12289,7 @@
     },
     "word-wrap": {
       "version": "1.2.3",
-      "resolved": "https://registry.npm.taobao.org/word-wrap/download/word-wrap-1.2.3.tgz?cache=0&sync_timestamp=1589683603678&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fword-wrap%2Fdownload%2Fword-wrap-1.2.3.tgz",
+      "resolved": "https://registry.npm.taobao.org/word-wrap/download/word-wrap-1.2.3.tgz",
       "integrity": "sha1-YQY29rH3A4kb00dxzLF/uTtHB5w="
     },
     "wordwrap": {
@@ -12353,7 +12353,7 @@
     },
     "xmlchars": {
       "version": "2.2.0",
-      "resolved": "https://registry.npm.taobao.org/xmlchars/download/xmlchars-2.2.0.tgz",
+      "resolved": "https://registry.nlark.com/xmlchars/download/xmlchars-2.2.0.tgz",
       "integrity": "sha1-Bg/hvLf5x2/ioX24apvDq4lCEMs="
     },
     "xtend": {

src/components/camera.vue

@@ -1,20 +1,19 @@
 <template>
     <div>
        <!--开启摄像头-->
-        <img @click="callCamera" :src="headImgSrc" alt="摄像头">
+        <el-button size="mini" type="primary" @click="callCamera">开启摄像头</el-button>
         <!--canvas截取流-->
         <canvas ref="canvas" width="640" height="480"></canvas>
         <!--图片展示-->
         <video ref="video" width="640" height="480" autoplay></video>
         <!--确认-->
-        <el-button size="mini" type="primary" @click="photograph"></el-button>
+        <el-button size="mini" type="primary" @click="photograph">确认保存</el-button>
     </div>
 </template>   
 <script>
 export default {
   data () {
     return {
-      headImgSrc: require('@/assets/img/tou.png')
     }
   },
   methods: {
@@ -53,7 +52,7 @@ export default {
       // 保存到本地
       this.dialogCamera = false
       let ADOM = document.createElement('a')
-      ADOM.href = this.headImgSrc
+      ADOM.href = imgBase64
       ADOM.download = new Date().getTime() + '.jpeg'
       ADOM.click()
     },

src/components/function.vue

@@ -3,16 +3,48 @@
     <div class="img">
       <div class="controlZ">
         <div id="screan" ref="dv">
-          <img src="../assets/img/screan.png" alt="" />
+          <img :src="img[0]" alt="" v-show="!isCamera" />
+          <!--图片展示-->
+          <video
+            ref="video"
+            width="130"
+            height="130"
+            autoplay
+            v-show="isCamera"
+          ></video>
         </div>
         <div id="tou" ref="dv1">
-          <img src="../assets/img/tou.png" alt="" />
+          <img :src="img[2]" alt="" />
         </div>
         <div id="ai" ref="dv2">
-          <img src="../assets/img/ai.png" alt="" />
+          <img :src="img[1]" alt="" />
         </div>
         <div id="police" ref="dv2">
-          <img src="../assets/img/police.png" alt="" />
+          <img :src="img[3]" alt="" />
+        </div>
+      </div>
+
+      <div class="cameraZ">
+        <!--开启摄像头-->
+        <div class="cameraBtn">
+          <el-button
+            size="mini"
+            type="primary"
+            @click="callCamera"
+            v-if="!isCamera"
+            >开启摄像头</el-button
+          >
+          <el-button size="mini" type="primary" @click="closeCamera" v-else
+            >关闭摄像头</el-button
+          >
+          <el-button size="mini" type="primary" @click="photograph"
+            >确认保存</el-button
+          >
+        </div>
+        <!--确认-->
+        <div>
+          <!--canvas截取流-->
+          <canvas ref="canvas" width="300" height="240" v-if="isCamera"></canvas>
         </div>
       </div>
     </div>
@@ -24,9 +56,76 @@ export default {
   data() {
     return {
       that: this,
+      img: [
+        require("../assets/img/screan.png"),
+        require("../assets/img/ai.png"),
+        require("../assets/img/tou.png"),
+        require("../assets/img/police.png"),
+      ],
+      isCamera: false,
     };
   },
-  methods: {},
+  methods: {
+    // 调用摄像头
+    callCamera() {
+      let _this = this;
+      // H5调用电脑摄像头API
+      navigator.mediaDevices
+        .getUserMedia({
+          video: true,
+        })
+        .then((success) => {
+          _this.isCamera = true;
+          // 摄像头开启成功
+          _this.$refs["video"].srcObject = success;
+          // 实时拍照效果
+          _this.$refs["video"].play();
+        })
+        .catch((error) => {
+          // console.error("摄像头开启失败，请检查摄像头是否可用！");
+           _this.$message.error('摄像头开启失败，请检查摄像头是否可用！');
+        });
+    },
+    // 拍照
+    photograph() {
+      let ctx = this.$refs["canvas"].getContext("2d");
+      // 把当前视频帧内容渲染到canvas上
+      ctx.drawImage(this.$refs["video"], 0, 0, 300, 240);
+      // 转base64格式、图片格式转换、图片质量压缩
+      let imgBase64 = this.$refs["canvas"].toDataURL("image/jpeg", 0.7); // 由字节转换为KB 判断大小
+
+      let str = imgBase64.replace("data:image/jpeg;base64,", "");
+      let strLength = str.length;
+      let fileLength = parseInt(strLength - (strLength / 8) * 2); // 图片尺寸  用于判断
+      let size = (fileLength / 1024).toFixed(2);
+      console.log(size); // 上传拍照信息  调用接口上传图片 .........
+
+      // 保存到本地
+      // this.isCamera = false;
+      let ADOM = document.createElement("a");
+      ADOM.href = imgBase64;
+      ADOM.download = new Date().getTime() + ".jpeg";
+      ADOM.click();
+      this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+    },
+    // 关闭摄像头
+    closeCamera() {
+      if (!this.$refs["video"].srcObject) {
+        this.isCamera = false;
+        return;
+      }
+      let stream = this.$refs["video"].srcObject;
+      let tracks = stream.getTracks();
+      tracks.forEach((track) => {
+        track.stop();
+      });
+      this.$refs["video"].srcObject = null;
+      this.isCamera = false;
+    },
+  },
 };
 </script>
 
@@ -124,10 +223,27 @@ body {
   cursor: pointer;
 }
 
-.controlZ{
-        position: absolute;
-    width: 240px;
-    height: 450px;
-    margin-left: 10%;
+.controlZ {
+  width: 240px;
+  height: 450px;
+  margin-left: 10%;
+  position: relative;
+}
+
+.cameraZ {
+  display: flex;
+  height: 340px;
+}
+.cameraZ div {
+  margin-left: 10px;
+}
+.cameraBtn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.cameraBtn button {
+  margin: 0 0 10px 0;
 }
 </style>

src/main.js

@@ -5,11 +5,14 @@ import App from './App'
 import router from './router'
 import store from './config/config'
 import ajax from './common/axios.config'
+import { Message  } from 'element-ui'
 
 
 Vue.config.productionTip = false
+import { Form } from 'element-ui'
 Vue.prototype.$store = store;// 将store实例挂在vue原型上
 Vue.prototype.ajax = ajax
+Vue.prototype.$message = Message 
 
 
 /* eslint-disable no-new */

src/router/index.js

@@ -7,7 +7,7 @@ import blockly from '@/components/blockly'
 import function1 from '@/components/function'
 import camera from '@/components/camera'
 
-Vue.use(Router)
+Vue.use(Router).use(ElementUI)
 
 export default new Router({
   routes: [