使用canvas截取web camera指定区域,并生成图片

目标,截取红色色块背后的视频区域。

代码结构如下:

html 复制代码
<div id="p1">
  <video id="v1" autoplay playsinline></video>
  <div id="mrz"></div>
  <canvas id="captureCanvas"></canvas>
</div>
<button id="screenshot-btn">截图</button>
<img id="screenshot" src="" alt="screenshot">

核心代码是确定截取坐标及大小。

javascript 复制代码
// 定义截图函数
async function takeScreenshot() {
  // 获取视频元素
  const video = document.getElementById('v1');

  // 获取 mrz 区域的位置和尺寸
  const mrzRect = document.getElementById('mrz').getBoundingClientRect();
  const mrzWidth = mrzRect.width;
  const mrzHeight = mrzRect.height;

  // 设置 canvas 大小为 mrz 区域的大小
  const canvas = document.getElementById('captureCanvas');
  canvas.width = mrzWidth;
  canvas.height = mrzHeight;

  // 获取 canvas 的 2D 上下文
  const ctx = canvas.getContext('2d');

  // 清除 canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 获取视频元素的位置
  const videoRect = video.getBoundingClientRect();

  // 获取 mrz 区域相对于视频的位置
  const mrzX = mrzRect.left - videoRect.left;
  const mrzY = mrzRect.top - videoRect.top;

  // 计算视频流的像素比例
  const videoScaleX = videoRect.width / video.videoWidth;
  const videoScaleY = videoRect.height / video.videoHeight;

  // 计算原始视频坐标
  const originalMrzX = Math.round(mrzX / videoScaleX);
  const originalMrzY = Math.round(mrzY / videoScaleY);

  // 确保原始坐标正确
  const finalMrzX = Math.max(0, originalMrzX);
  const finalMrzY = Math.max(0, originalMrzY);

  // 使用 drawImage 方法绘制指定区域到 canvas 上
  ctx.drawImage(
    video,
    finalMrzX, finalMrzY, // 源图像的起始坐标
    mrzWidth / videoScaleX, mrzHeight / videoScaleY, // 源图像的宽度和高度
    0, 0, // 目标图像的起始坐标
    mrzWidth, mrzHeight // 目标图像的宽度和高度
  );

  // 生成图片
  const dataUrl = canvas.toDataURL();
  document.getElementById('screenshot').src = dataUrl;
}

最关键的就是这段代码:

javascript 复制代码
// 使用 drawImage 方法绘制指定区域到 canvas 上
  ctx.drawImage(
    video,
    finalMrzX, finalMrzY, // 源图像的起始坐标
    mrzWidth / videoScaleX, mrzHeight / videoScaleY, // 源图像的宽度和高度
    0, 0, // 目标图像的起始坐标
    mrzWidth, mrzHeight // 目标图像的宽度和高度
  );

实际应用的时候可能截取的区域不是很准确,有偏差,这时候可以通过调整起始坐标位置和源图像的宽高,来调整截图区域,使截出来的图片更准确。

相关推荐
然我17 分钟前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing20 分钟前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心21 分钟前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
小飞悟22 分钟前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
小old弟22 分钟前
用Sass循环实现炫彩文字跑马灯效果
前端
code_YuJun22 分钟前
Promise 基础使用
前端·javascript·promise
Codebee22 分钟前
OneCode自主UI设计体系:架构解析与核心实现
前端·javascript·前端框架
GIS之路26 分钟前
GIS 空间关系:九交模型
前端
xiguolangzi33 分钟前
vue3+element-plus el-table列的显隐、列宽 持久化
前端·javascript·vue.js
用户68238060322535 分钟前
前端会用到的数据结构--堆(HEAP)
前端