cocoroboBlockly/src/components/function.vue

<template>
  <div style="width: 100%; height: 100%">
    <div class="img">
      <div class="controlZ">
        <div id="screan" ref="dv">
          <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="img[2]" alt="" />
        </div>
        <div id="ai" ref="dv2">
          <img :src="img[1]" alt="" />
        </div>
        <div id="police" ref="dv2">
          <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>
  </div>
</template>

<script>
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: {
    // 调用摄像头
    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>

<style scoped>
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

.tip {
  margin: 25px 0 30px 20px;
  width: 419px;
}

.tip > img,
#screan > img,
#tou > img,
#ai > img,
#police > img,
.right > img {
  width: 100%;
  height: 100%;
  user-select: none;
}

.img {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  /* margin: auto; */
  width: 100%;
  height: 100%;
  position: relative;
  /* position: relative; */
}

#screan {
  width: 130px;
  position: absolute;
  z-index: 4;
  top: 85px;
  left: 55.3px;
}

#ai {
  width: 130px;
  position: absolute;
  z-index: 1;
  top: 82px;
  left: 55.3px;
}

#tou {
  width: 45px;
  position: absolute;
  z-index: 3;
  top: 56px;
  left: 97.5px;
}

#police {
  width: 240px;
  position: absolute;
  z-index: 2;
}

.button {
  color: #fff;
  background: #8ca1de;
  width: 550px;
  height: 55px;
  font-size: 20px;
  text-align: center;
  line-height: 55px;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  user-select: none;
}

.right {
  width: 40px;
  position: absolute;
  left: 55%;
  top: 70%;
  display: none;
}

.dark {
  background: #5b79d0;
  cursor: pointer;
}

.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>