function.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. <template>
  2. <div style="width: 100%; height: 100%">
  3. <div class="img">
  4. <div class="controlZ">
  5. <div id="screan" ref="dv">
  6. <img :src="img[0]" alt v-show="!isCamera" />
  7. <!--图片展示-->
  8. <video ref="video" width="130" height="130" autoplay v-show="isCamera"></video>
  9. </div>
  10. <div id="tou" ref="dv1">
  11. <img :src="img[2]" alt />
  12. </div>
  13. <div id="ai" ref="dv2">
  14. <img :src="img[1]" alt />
  15. </div>
  16. <div id="police" ref="dv2">
  17. <img :src="img[3]" alt />
  18. </div>
  19. </div>
  20. <div class="cameraZ">
  21. <!--开启摄像头-->
  22. <div class="cameraBtn">
  23. <el-button size="mini" type="primary" @click="callCamera" v-if="!isCamera">开启摄像头</el-button>
  24. <el-button size="mini" type="primary" @click="closeCamera" v-else>关闭摄像头</el-button>
  25. <el-button size="mini" type="primary" @click="photograph" v-if="isCamera">确认保存</el-button>
  26. </div>
  27. <!--确认-->
  28. <div>
  29. <!--canvas截取流-->
  30. <canvas ref="canvas" width="300" height="240" v-if="isCamera"></canvas>
  31. </div>
  32. </div>
  33. </div>
  34. </div>
  35. </template>
  36. <script>
  37. export default {
  38. data() {
  39. return {
  40. that: this,
  41. img: [
  42. require("../assets/img/screan.png"),
  43. require("../assets/img/ai.png"),
  44. require("../assets/img/tou.png"),
  45. require("../assets/img/police.png")
  46. ],
  47. isCamera: false
  48. };
  49. },
  50. methods: {
  51. // 调用摄像头
  52. callCamera() {
  53. let _this = this;
  54. // H5调用电脑摄像头API
  55. navigator.mediaDevices
  56. .getUserMedia({
  57. video: true
  58. })
  59. .then(success => {
  60. _this.isCamera = true;
  61. // 摄像头开启成功
  62. _this.$refs["video"].srcObject = success;
  63. // 实时拍照效果
  64. _this.$refs["video"].play();
  65. })
  66. .catch(error => {
  67. // console.error("摄像头开启失败,请检查摄像头是否可用!");
  68. _this.$message.error("摄像头开启失败,请检查摄像头是否可用!");
  69. });
  70. },
  71. // 拍照
  72. photograph() {
  73. let ctx = this.$refs["canvas"].getContext("2d");
  74. // 把当前视频帧内容渲染到canvas上
  75. ctx.drawImage(this.$refs["video"], 0, 0, 300, 240);
  76. // 转base64格式、图片格式转换、图片质量压缩
  77. let imgBase64 = this.$refs["canvas"].toDataURL("image/jpeg", 0.7); // 由字节转换为KB 判断大小
  78. let str = imgBase64.replace("data:image/jpeg;base64,", "");
  79. let strLength = str.length;
  80. let fileLength = parseInt(strLength - (strLength / 8) * 2); // 图片尺寸 用于判断
  81. let size = (fileLength / 1024).toFixed(2);
  82. console.log(size); // 上传拍照信息 调用接口上传图片 .........
  83. // 保存到本地
  84. // this.isCamera = false;
  85. let ADOM = document.createElement("a");
  86. ADOM.href = imgBase64;
  87. ADOM.download = new Date().getTime() + ".jpeg";
  88. ADOM.click();
  89. this.$message({
  90. message: "保存成功",
  91. type: "success"
  92. });
  93. },
  94. // 关闭摄像头
  95. closeCamera() {
  96. if (!this.$refs["video"].srcObject) {
  97. this.isCamera = false;
  98. return;
  99. }
  100. let stream = this.$refs["video"].srcObject;
  101. let tracks = stream.getTracks();
  102. tracks.forEach(track => {
  103. track.stop();
  104. });
  105. this.$refs["video"].srcObject = null;
  106. this.isCamera = false;
  107. }
  108. },
  109. mounted() {
  110. var _s3 = document.createElement("script");
  111. _s3.src = "/static/materialize/jquery-2.1.3.min.js";
  112. _s3.type = "text/javascript";
  113. document.head.appendChild(_s3);
  114. var _s2 = document.createElement("script");
  115. _s2.src = "/static/camera.283d5d54.js";
  116. _s2.type = "text/javascript";
  117. document.head.appendChild(_s2);
  118. var _s1 = document.createElement("script");
  119. _s1.src = "/static/bundle.js";
  120. _s1.type = "text/javascript";
  121. document.head.appendChild(_s1);
  122. if (this.$route.query.isCamera == "1") {
  123. this.$message.error("摄像头开启失败,请检查摄像头是否可用!");
  124. }
  125. }
  126. };
  127. </script>
  128. <style scoped>
  129. html,
  130. body {
  131. margin: 0;
  132. padding: 0;
  133. width: 100%;
  134. }
  135. .tip {
  136. margin: 25px 0 30px 20px;
  137. width: 419px;
  138. }
  139. .tip > img,
  140. #screan > img,
  141. #tou > img,
  142. #ai > img,
  143. #police > img,
  144. .right > img {
  145. width: 100%;
  146. height: 100%;
  147. user-select: none;
  148. }
  149. .img {
  150. display: flex;
  151. flex-direction: row;
  152. justify-content: flex-start;
  153. align-items: center;
  154. /* margin: auto; */
  155. width: 100%;
  156. height: 100%;
  157. position: relative;
  158. /* position: relative; */
  159. }
  160. #screan {
  161. width: 130px;
  162. position: absolute;
  163. z-index: 4;
  164. top: 85px;
  165. left: 55.3px;
  166. }
  167. #ai {
  168. width: 130px;
  169. position: absolute;
  170. z-index: 1;
  171. top: 82px;
  172. left: 55.3px;
  173. }
  174. #tou {
  175. width: 45px;
  176. position: absolute;
  177. z-index: 3;
  178. top: 56px;
  179. left: 97.5px;
  180. }
  181. #police {
  182. width: 240px;
  183. position: absolute;
  184. z-index: 2;
  185. }
  186. .button {
  187. color: #fff;
  188. background: #8ca1de;
  189. width: 550px;
  190. height: 55px;
  191. font-size: 20px;
  192. text-align: center;
  193. line-height: 55px;
  194. position: absolute;
  195. bottom: 10%;
  196. left: 50%;
  197. transform: translateX(-50%);
  198. user-select: none;
  199. }
  200. .right {
  201. width: 40px;
  202. position: absolute;
  203. left: 55%;
  204. top: 70%;
  205. display: none;
  206. }
  207. .dark {
  208. background: #5b79d0;
  209. cursor: pointer;
  210. }
  211. .controlZ {
  212. width: 240px;
  213. height: 450px;
  214. margin-left: 10%;
  215. position: relative;
  216. }
  217. .cameraZ {
  218. display: flex;
  219. height: 340px;
  220. }
  221. .cameraZ div {
  222. margin-left: 10px;
  223. }
  224. .cameraBtn {
  225. display: flex;
  226. flex-direction: column;
  227. align-items: center;
  228. }
  229. .cameraBtn button {
  230. margin: 0 0 10px 0;
  231. }
  232. </style>