当前位置: 首页 > news >正文

vue3实现抓拍并上传

<template><video ref="videoRef" autoplay playsinline></video><canvas ref="canvasRef" class="hidden"></canvas><button @click="capture">抓拍</button>
</template><style>
.hidden { display: none; }
</style>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';const videoRef = ref(null);
const canvasRef = ref(null);
let stream = null;// 初始化摄像头
const initCamera = async () => {try {stream = await navigator.mediaDevices.getUserMedia({ video: true });videoRef.value.srcObject = stream;} catch (error) {console.error('摄像头访问失败:', error);}
};// 抓拍并存储
const capture = () => {const video = videoRef.value;const canvas = canvasRef.value;const ctx = canvas.getContext('2d');// 设置canvas尺寸与视频一致canvas.width = video.videoWidth;canvas.height = video.videoHeight;// 绘制当前帧到canvasctx.drawImage(video, 0, 0, canvas.width, canvas.height);// 转为base64并存储const base64 = canvas.toDataURL('image/png');localStorage.setItem('userImg', base64);
};// 清理资源
const cleanup = () => {if (stream) {stream.getTracks().forEach(track => track.stop());stream = null;}
};

//图片上传函数
function uploadimg() {
  // 提取base64数据部分
  const base64Data = localStorage.userImg.split(',')[1];

  // 创建FormData对象
  // const formData = new FormData();
  // formData.append('base64Image', base64Data);

  // 也可以直接发送base64字符串
  const data = { base64Image: base64Data };

  // 发送到服务器
  fetch(`http://192.168.2.44:18758/imageUpload/zhuapai`, {
    method: 'POST',
    // body: formData,
    // 如果使用JSON方式
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data)
  })
    .then(response => response.json())
    .then(data => {
      console.log('上传成功:', data);
      img_url = data.data.fullUrl

      let img0 = document.getElementById("j_img");
      img0.src = "";
    })
    .catch(error => {
      console.error('上传失败:', error);
    });

}
onMounted(initCamera);
onBeforeUnmount(cleanup);
</script>

 


http://www.hskmm.com/?act=detail&tid=28540

相关文章:

  • 2025 年国内润滑油厂商最新推荐榜:聚焦优质品牌实力,助力企业精准选品润滑油净化/过滤/回用/液压油润滑油过滤厂商推荐
  • 纯前端实现项目过期
  • 基于形态学的权重自适应图像去噪的MATLAB实现
  • 2025 年油水分离器 / 气液分离器 / 液固分离器 / 水分离器 / 油分离器厂家推荐:西安同大技术沉淀与流体净化解决方案解析
  • 2025 年过滤器厂家最新推荐排行榜:聚焦烛式 / 金属 / 非金属 / 化工 / 精密过滤器等多类型设备,精选优质品牌助企业高效选型液固/高效/气固/催化剂过滤器厂家推荐
  • OOP-实验1
  • 2025 年立式/立式全钢板/青黄储/液压打包机厂家推荐榜:聚焦实用需求,精选高适配设备助力企业降本增效
  • DNS服务
  • 308、清平调三首
  • 2025管件厂家最新推荐榜:高品质管件与卓越工艺口碑之选
  • 2025不锈钢管件厂家推荐榜:技术实力与诚信口碑双重保障
  • 哪款剪贴板增强软件最好用?有什么剪贴板内容大全值得分享?多款剪切板历史免费版管理工具推荐
  • EndNote文献管理工具!研究生必备软件!超详细下载安装教程(附下载地址)
  • 鸿蒙应用开发从入门到实战(十九):样式复用案例
  • 2025 年最新推荐冰醋酸厂商综合实力排行榜: 厂商定制服务与仓储能力深度解析昆山/太仓/吴江区/吴中区/相城区/姑苏区冰醋酸厂商推荐
  • 中电金信:“源启大模型文本生成算法”成功通过互联网信息服务算法备案
  • 基于MATLAB的禁忌搜索算法解决物流网络枢纽选址问题
  • springboot 项目部署是tomcat么
  • 2025 年最新推荐恒温恒湿试验箱优质厂家榜单:涵盖立式/可程式/小型等多类型设备的精选企业推荐可程式/小型/防爆高低温试/高温高湿试验箱/低温低湿试验箱厂家推荐
  • CSS开发工具推荐与实战经验,让样式开发更高效、更精准
  • 详细揭秘:详细揭秘:集合划分容斥的容斥系数
  • 2025 年冷热冲击试验箱生产厂家最新推荐榜:聚焦三箱 / 两箱 / 吊篮式 / 小型 / 风冷式 / 可程式设备,精选优质企业助力高效选购
  • 学好微积分特别是偏微分方程的数值求解对于学习CFD的好处?
  • 基于Logistic映射与Chen超混沌系统结合DNA分块编解码的图像加密技术
  • 批量文件重命名工具(带撤销功能)
  • Trae与Gitee MCP强强联合:AI编程生态迎来重大升级
  • Web前端入门第 88 问:引入 JavaScript 的 script 标签究竟有多少用法?
  • 我如何控制新增的节点是 leader 还是follower呢?
  • Nuxt3项目Warn:Browserslist: browsers data (caniuse-lite) is 6 months old.
  • 2025 年全屋定制 / 高端 / 装修收纳设计 / 不锈钢橱柜 / 别墅 / 大平层装修公司推荐:苏州伍德家居与百能家居的优质定制解决方案解析