【Vue3】 typescript 实现开启摄像头并拍照，拍照图片回显，获取图片的 Base64 字符串并上传

芭拉拉小魔仙

已于 2024-08-07 17:21:23 修改

阅读量220

点赞数 1

分类专栏： Vue3、TypeScript 文章标签： typescript javascript 前端 vue3

于 2024-08-07 15:14:04 首次发布

本文链接：https://blog.csdn.net/weixin_45274678/article/details/140992547

版权

Vue3、TypeScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

效果图：
在这里插入图片描述
html


 <div style="width: 600px;height: 400px;position: relative;">
 	<!--摄像头画面-->
    <video ref="video" width="600" height="400" autoplay ></video>
    <!--拍摄图片-->
     <canvas ref="canvas" width="540" height="400" ></canvas>
 </div>
 <el-button type="primary" class="m-l-3" size="default" @click="takePhoto">
      拍摄图片
 </el-button>
 <el-button :loading="tongueLoading" type="primary" size="default" @click="uploadPhoto('handle')">
      上传图片
  </el-button>

javascript

    
    const video = ref(null);
    const canvas = ref(null);
    const photoData = ref(null);
    const uploadRef = ref();
    
    startCamera();
    //初始化视频
   function startCamera(){
        // 检测浏览器是否支持mediaDevices
        if (navigator.mediaDevices) {
            navigator.mediaDevices
            // 开启视频
            .getUserMedia({audio: false, video: true})
            .then((stream) => {
                // 将视频流传入viedo控件
                if (video.value) {
                    video.value.srcObject = stream;
                }
            })
            .catch((err) => {
                console.log(err);
            });
        } else {
            ElMessage.warning("该浏览器不支持开启摄像头，请更换最新版浏览器");
        }
    };
    //拍照
    const takePhoto = async () => {
        const stream = video.value.srcObject;
        const ctx = canvas.value.getContext('2d');
        ctx.drawImage(video.value, 0, 0, canvas.value.width, canvas.value.height);
        photoData.value = canvas.value.toDataURL('image/png');
    };

   // 发送上传
    const uploadPhoto = async (type:string) => {
        let imageStr = photoData.value.split('base64,')[1];//获取图片的 Base64 字符串
   
        const formData = new FormData();
        const data = {
            image: imageStr
        };
        tongueLoading.value = true;
        hasResult.value = false;
        fetch('接口', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin':'*'
        },
        body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            console.log('返回结果',data)
        })
        .catch(error => {
			console.error('报错',data)
        });
    };

photoData.value值示例

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhwAAAGQCAYAAADlZLlCAAAAAXNSR0IArs4c6QAAIABJREFUeF5kvVmzpdeRHZbfGe+9VYUZhXki2ZMjJPWL9WaH/eAXP1iypRbNtsMPbjJIgv33rOg/YEmMkELqVhMogOAI1ICap3vvmY9jTXt/BaObQbDq3nO+b+/cmStXrsw9/PDnnx6nw7GqjrWvoTbHYw2ToWaToaoOtd8PNUxndTwealZV82PVZNjX8bCv7e5Qta/aX17W5eq81rtN7Y67qqHqcNjXcNjxdybHoY7HoQ6TSe0PQ9UwLXzlcDzUfFE1qWNNj5M67IbaHYbaz6sOk33NJocaJlW7w7H2h1lNa17zAX+JXz7UMBzqiA+azflH+JxheqxD4dEXNalpDXiOmX522A/8s+Ok8OV8z/0w1AHveJhWTfG9O34nH/CIdalazGY1PehnDodZHYZj7Sf7OkwPdZwca3I81uSwx6/XdDKryWRah+OE782Pwe9NhlpP9vy7ZU3wh3UcsDaTOuKzJ0MdZlXbyZ7fOa2Bn6d10s/N8Kp14F5grw7DUMdhUpNhWtzBYcJnOw744HkNh0MtJofCC+2PQ+2OR/7ufFo1Gw414bPheRf