BootstrapVue项目中将拍摄的照片转换为base64格式的实现问题

开发者阿泽

2026-9-29

解决方案

你只需要按以下三步修改代码即可实现需求：

1. 补充data变量定义

先在data中新增存储拍摄画布的变量：

data() {
  return {
    video: {play: null, onplay: null, srcObject: null},
    canvas: {},
    capturedCanvas: null // 新增：存储拍摄完成后的画布实例
  };
}

2. 修正`takePicture`方法的冗余代码

你当前的takePicture方法重复调用了两次绘制逻辑，且赋值的this.takenPicture为无效值，修改为：

takePicture() {
  const picture = document.querySelector("canvas");
  const ctx = picture.getContext("2d");
  ctx.imageSmoothingEnabled = true;
  ctx.imageSmoothingQuality = "high";
  // 单次绘制视频帧到画布即可
  ctx.drawImage(document.querySelector("video"), 0, 0, picture.width, picture.height);
  // 存储绘制完成的画布，方便后续转base64
  this.capturedCanvas = picture;
}

3. 实现`uploadPicture`转换base64逻辑

直接调用canvas内置的toDataURL方法即可得到base64格式的图片，支持自定义导出格式和质量：

uploadPicture() {
  // 前置校验：判断用户是否已经拍摄照片
  if (!this.capturedCanvas) {
    alert('请先拍摄照片再执行上传操作');
    return;
  }
  // 第一个参数指定导出格式，支持image/png、image/jpeg等；第二个参数0-1指定jpeg格式的图片质量
  const base64Img = this.capturedCanvas.toDataURL('image/jpeg', 0.9);
  // 此处base64Img就是转换完成的结果，可直接打印调试或提交给后端接口
  console.log('照片base64内容：', base64Img);
  // 如果你不需要格式前缀'data:image/jpeg;base64,'，可以用以下代码截取纯编码内容：
  // const pureBase64 = base64Img.split(',')[1];
}