AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

神奇canvas 带你实现魔法摄像头

2024-10-17 66
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 神奇canvas 带你实现魔法摄像头

背景

我们用手机的摄像头自拍，很容易实现 简单的自拍效果，如复古、黑白等等。其实我们使用web端的JavaScript也是可以实现的。接下来就带领小伙伴实现一个魔法摄像头。并且提供了截图下载功能。

魔鬼风格

276K(3OAY]5JE1CCI][(VYF.png

复古风格

305K]Q0H]G8`9`E_A}I0Y(4.png

关键技术

  1. canvas 它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
  2. video 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器
  3. navigator.mediaDevices.getUserMedia 用来将摄像头视频转成文件流
  4. requestAnimationFrame 你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画
  5. 小程序 canvas 生成海报 一次搞掂

主要业务流程

  1. 调用摄像头加载画面到video上
  2. 使用canvas将video视频逐帧画到canvas上
  3. 实现canvas滤镜效果
  4. 点击截图

调用摄像头加载画面到video上

3W$G$7@O~N)_X{`Y}7@JJBX.png

}T)PC0RS$(F90G%XDYHWB_J.png 

<!DOCTYPE html>
<html>
<head>
  <title>Canvas Demo</title>
</head>
<body>
  <video id="videoElement" autoplay></video>
  <canvas id="canvasElement"></canvas>
  <script>
    // 获取视频元素和画布元素
    const video = document.getElementById('videoElement');
    // 检查浏览器是否支持 getUserMedia API
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      // 请求访问摄像头
      navigator.mediaDevices.getUserMedia({ video: true })
        .then(function (stream) {
          // 将视频流绑定到视频元素上
          video.srcObject = stream;
          // 开始绘制视频画面到画布上
          requestAnimationFrame(drawFrame);
        })
        .catch(function (error) {
          console.error('无法访问摄像头:', error);
        });
    } else {
      console.error('浏览器不支持 getUserMedia API');
    }
  </script>
</body>
</html>

将video视频逐帧画到canvas上

COHQ$OBBF1`9Z7E%NEZ]~CA.png

R}A62]`%%U)E~9E]O8{EPZ4.png 

<!DOCTYPE html>
<html>
<head>
  <title>Canvas Demo</title>
</head>
<body>
  <video id="videoElement" autoplay></video>
  <canvas id="canvasElement"></canvas>
  <script>
    // 获取视频元素和画布元素
    const video = document.getElementById('videoElement');
    const canvas = document.getElementById('canvasElement');
    const ctx = canvas.getContext('2d');
    // 当视频元素加载完成后执行
    video.addEventListener('loadedmetadata', function () {
      // 设置画布大小与视频尺寸相同
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
    });
    // 在每一帧绘制视频画面到画布上 一秒描绘60次
    function drawFrame() {
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);// 将视频画在画布上
      requestAnimationFrame(drawFrame);
    }
    // 检查浏览器是否支持 getUserMedia API
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      // 请求访问摄像头
      navigator.mediaDevices.getUserMedia({ video: true })
        .then(function (stream) {
          // 将视频流绑定到视频元素上
          video.srcObject = stream;
          // 开始绘制视频画面到画布上
          requestAnimationFrame(drawFrame);
        })
        .catch(function (error) {
          console.error('无法访问摄像头:', error);
        });
    } else {
      console.error('浏览器不支持 getUserMedia API');
    }
  </script>
</body>
</html>

实现canvas滤镜效果

以下代码没有进行过多封装，后续会出一篇使用面向对象和设计模式的续集来优化代码

本次案例实现的滤镜效果主要有 反转 黑白 亮度 复古 红色 绿色 蓝色 透明 马赛克 渐变

在canvas中，可以通过 getImageData 获取到当前画布上所有的像素点，它以4个点为一组，表示画布上当前坐标点的 R G B A （红、绿、蓝、透明度）。我们要实现的滤镜效果，几乎都是直接对该像素点进行操作。如 黑白效果 将每个像素的RGB值转换为灰度值（R、G、B三个分量取平均值）

GM0_786JR2~OY{@C}J3`L%P.png 

<!DOCTYPE html>
<html>
<head>
  <title>Canvas Demo</title>
</head>
<body>
  <video id="videoElement" autoplay></video>
  <canvas id="canvasElement"></canvas>
  <script>
    // 获取视频元素和画布元素
    const video = document.getElementById('videoElement');
    const canvas = document.getElementById('canvasElement');
    const ctx = canvas.getContext('2d');
    const buttons = document.querySelectorAll("button[data-type]");
    const takePhoto = document.querySelector("#takePhoto")
    let drawType = ""
    // 当视频元素加载完成后执行
    video.addEventListener('loadedmetadata', function () {
      // 设置画布大小与视频尺寸相同
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
    });
    // 在每一帧绘制视频画面到画布上
    function drawFrame() {
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      let imageObj = ctx.getImageData(0, 0, canvas.width, canvas.height);
        //  黑白效果
      for (let i = 0; i < imageObj.data.length; i += 4) {
        const average = (imageObj.data[i + 0] + imageObj.data[i + 1] + imageObj.data[i + 2] + imageObj.data[i + 3]) / 3;
        imageObj.data[i + 0] = average;//红
        imageObj.data[i + 1] = average; //绿
        imageObj.data[i + 2] = average; //蓝
      }
      ctx.putImageData(imageObj, 0, 0)
      requestAnimationFrame(drawFrame);
    }
    // 检查浏览器是否支持 getUserMedia API
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      // 请求访问摄像头
      navigator.mediaDevices.getUserMedia({ video: true })
        .then(function (stream) {
          // 将视频流绑定到视频元素上
          video.srcObject = stream;
          // 开始绘制视频画面到画布上
          requestAnimationFrame(drawFrame);
        })
        .catch(function (error) {
          console.error('无法访问摄像头:', error);
        });
    } else {
      console.error('浏览器不支持 getUserMedia API');
    }
  </script>
</body>
</html>

所有滤镜效果总结如下

  1. 反转效果：
  • 原理：通过将每个像素的RGB值取反来实现反转效果。
  • 实现方式：使用getImageData获取图像数据，然后遍历每个像素，将每个像素的RGB值取反，再使用putImageData将修改后的数据绘制回Canvas。
  1. 黑白效果：
  • 原理：将每个像素的RGB值转换为灰度值，使图像变为黑白。
  • 实现方式：使用getImageData获取图像数据，然后遍历每个像素，将每个像素的RGB值转换为灰度值（R、G、B三个分量取平均值），再使用putImageData将修改后的数据绘制回Canvas。
  1. 亮度效果：
  • 原理：调整每个像素的亮度值，使图像变亮或变暗。
  • 实现方式：使用getImageData获取图像数据，然后遍历每个像素，调整每个像素的亮度值，再使用putImageData将修改后的数据绘制回Canvas。
  1. 复古效果：
  • 原理：通过调整每个像素的色调、饱和度和亮度，使图像呈现复古效果。
  • 实现方式：使用getImageData获取图像数据，然后遍历每个像素，调整每个像素的色调、饱和度和亮度，再使用putImageData将修改后的数据绘制回Canvas。
  1. 红色、绿色、蓝色效果：
  • 原理：增加或减少每个像素的红色、绿色、蓝色分量的值，使图像呈现相应颜色的效果。
  • 实现方式：使用getImageData获取图像数据，然后遍历每个像素，增加或减少每个像素的红色、绿色、蓝色分量的值，再使用putImageData将修改后的数据绘制回Canvas。
  1. 透明效果：
  • 原理：调整每个像素的透明度值，使图像呈现透明效果。
  • 实现方式：使用getImageData获取图像数据，然后遍历每个像素，调整每个像素的透明度值，再使用putImageData将修改后的数据绘制回Canvas。
  1. 马赛克效果：
  • 原理：将图像分割为小块，每个小块的像素值设置为该小块内像素的平均值，从而实现马赛克效果。
  • 实现方式：使用getImageData获取图像数据，然后将图像分割为小块，计算每个小块内像素的平均值，再将该小块内所有像素的值设置为该平均值，最后使用putImageData将修改后的数据绘制回Canvas。
  1. 马赛克效果
  • 由于实际操作过程中，上述马赛克效果处理性能比较底下，这里用来一个取巧的效果来实现。就是先用canvas将画面画小，然后再将画面缩放来实现一个模糊效果，间接实现马赛克效果
  1. 渐变滤镜效果：
  • 原理：通过在图像上应用渐变效果，使图像呈现渐变色的效果。
  • 实现方式：使用createLinearGradient或createRadialGradient创建渐变对象，然后使用渐变对象作为填充样式，绘制图像到Canvas上。

X(89VC4H~L5~YMQZ0O_P~GO.png 

<!DOCTYPE html>
<html>
<head>
  <title>Canvas Demo</title>
  <style>
    button {
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      overflow: hidden;
      user-select: none;
      outline: none;
      border: none;
      padding: 16px;
      background-color: #1d93ab;
      color: #fff;
    }
    button:focus {
      background-color: #e88f21
    }
  </style>
</head>
<body>
  <div>
    <button data-type="gray">反转</button>
    <button data-type="blackwhite">黑白</button>
    <button data-type="brightness">亮度</button>
    <button data-type="sepia">复古</button>
    <button data-type="redMask">红色</button>
    <button data-type="greenMask">绿色</button>
    <button data-type="blueMask">蓝色</button>
    <button data-type="opacity">透明</button>
    <button data-type="mosaic">马赛克</button>
    <button data-type="linearGradient">渐变</button>
  </div>
  <video id="videoElement" autoplay></video>
  <canvas id="canvasElement"></canvas>
  <script>
    // 获取视频元素和画布元素
    const video = document.getElementById('videoElement');
    const canvas = document.getElementById('canvasElement');
    const ctx = canvas.getContext('2d');
    const buttons = document.querySelectorAll("button[data-type]");
    let drawType = ""
    // 当视频元素加载完成后执行
    video.addEventListener('loadedmetadata', function () {
      // 设置画布大小与视频尺寸相同
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
    });
    // 在每一帧绘制视频画面到画布上
    function drawFrame() {
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      let imageObj = ctx.getImageData(0, 0, canvas.width, canvas.height);
      if (drawType === "gray") {
        // 反转
        for (let i = 0; i < imageObj.data.length; i += 4) {
          imageObj.data[i + 0] = 255 - imageObj.data[i + 0];
          imageObj.data[i + 1] = 255 - imageObj.data[i + 1];
          imageObj.data[i + 2] = 255 - imageObj.data[i + 2];
        }
        ctx.putImageData(imageObj, 0, 0)
      }
      if (drawType === "blackwhite") {
        // 黑白
        for (let i = 0; i < imageObj.data.length; i += 4) {
          const average = (imageObj.data[i + 0] + imageObj.data[i + 1] + imageObj.data[i + 2] + imageObj.data[i + 3]) / 3;
          imageObj.data[i + 0] = average;//红
          imageObj.data[i + 1] = average; //绿
          imageObj.data[i + 2] = average; //蓝
        }
        ctx.putImageData(imageObj, 0, 0)
      }
      if (drawType === "brightness") {
        // 亮度
        for (let i = 0; i < imageObj.data.length; i += 4) {
          const a = 50;
          imageObj.data[i + 0] += a;
          imageObj.data[i + 1] += a;
          imageObj.data[i + 2] += a;
        }
        ctx.putImageData(imageObj, 0, 0)
      }
      if (drawType === "sepia") {
        // 复古
        for (let i = 0; i < imageObj.data.length; i += 4) {
          const r = imageObj.data[i + 0];
          const g = imageObj.data[i + 1];
          const b = imageObj.data[i + 2];
          imageObj.data[i + 0] = r * 0.39 + g * 0.76 + b * 0.18;
          imageObj.data[i + 1] = r * 0.35 + g * 0.68 + b * 0.16;
          imageObj.data[i + 2] = r * 0.27 + g * 0.53 + b * 0.13;
        }
        ctx.putImageData(imageObj, 0, 0)
      }
      if (drawType === "redMask") {
        // 红色
        for (let i = 0; i < imageObj.data.length; i += 4) {
          const r = imageObj.data[i + 0]
          const g = imageObj.data[i + 1]
          const b = imageObj.data[i + 2]
          const average = (r + g + b) / 3
          imageObj.data[i + 0] = average
          imageObj.data[i + 1] = 0
          imageObj.data[i + 2] = 0
        }
        ctx.putImageData(imageObj, 0, 0)
      }
      if (drawType === "greenMask") {
        // 绿色
        for (let i = 0; i < imageObj.data.length; i += 4) {
          const r = imageObj.data[i + 0]
          const g = imageObj.data[i + 1]
          const b = imageObj.data[i + 2]
          const average = (r + g + b) / 3
          imageObj.data[i + 0] = 0
          imageObj.data[i + 1] = average
          imageObj.data[i + 2] = 0
        }
        ctx.putImageData(imageObj, 0, 0)
      }
      if (drawType === "blueMask") {
        // 蓝色
        for (let i = 0; i < imageObj.data.length; i += 4) {
          const r = imageObj.data[i + 0]
          const g = imageObj.data[i + 1]
          const b = imageObj.data[i + 2]
          const average = (r + g + b) / 3
          imageObj.data[i + 0] = 0
          imageObj.data[i + 1] = 0
          imageObj.data[i + 2] = average
        }
        ctx.putImageData(imageObj, 0, 0)
      }
      if (drawType === "opacity") {
        // 透明
        for (let i = 0; i < imageObj.data.length; i += 4) {
          imageObj.data[i + 3] = imageObj.data[i + 3] * 0.3;
        }
        ctx.putImageData(imageObj, 0, 0)
      }
      if (drawType === "linearGradient") {
        // 渐变
        const data = imageObj.data;
        // 遍历每个像素
        for (let i = 0; i < data.length; i += 4) {
          const x = (i / 4) % canvas.width; // 当前像素的 x 坐标
          const y = Math.floor(i / (4 * canvas.width)); // 当前像素的 y 坐标
          // 计算当前像素的颜色值
          const r = x / canvas.width * 255; // 红色分量
          const g = y / canvas.height * 255; // 绿色分量
          const b = 128; // 蓝色分量
          const a = 100; // 不透明度
          // 设置当前像素的颜色值
          data[i] = r; // 红色分量
          data[i + 1] = g; // 绿色分量
          data[i + 2] = b; // 蓝色分量
          data[i + 3] = a; // 不透明度
        }
        ctx.putImageData(imageObj, 0, 0)
      }
      if (drawType === "mosaic") {
        // 马赛克
        ctx.imageSmoothingEnabled = false; // 禁用图像平滑处理
        const tileSize = 10; // 马赛克块的大小
        // 缩小马赛克块
        ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width / tileSize, canvas.height / tileSize);
        // 放大回原来的大小
        ctx.drawImage(canvas, 0, 0, canvas.width / tileSize, canvas.height / tileSize, 0, 0, canvas.width, canvas.height);
      }
      requestAnimationFrame(drawFrame);
      // setTimeout(drawFrame, 1000);
    }
    // 检查浏览器是否支持 getUserMedia API
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      // 请求访问摄像头
      navigator.mediaDevices.getUserMedia({ video: true })
        .then(function (stream) {
          // 将视频流绑定到视频元素上
          video.srcObject = stream;
          // 开始绘制视频画面到画布上
          requestAnimationFrame(drawFrame);
        })
        .catch(function (error) {
          console.error('无法访问摄像头:', error);
        });
    } else {
      console.error('浏览器不支持 getUserMedia API');
    }
    buttons.forEach(button => {
      button.addEventListener("click", function (e) {
        drawType = e.target.dataset.type;
      })
    })
  </script>
</body>
</html>

点击截图

_VE}`~C(7JKR3R~KE[S{4N3.png

流程

  1. 将Canvas 的 toDataURL 方法将内容转换为数据 URL。
  2. 创建一个 <a> 元素，并将数据 URL 赋值给其 href 属性。
  3. 设置 <a> 元素的 download 属性为要保存的文件名。
  4. 使用 JavaScript 模拟点击 <a> 元素来触发下载。


const takePhoto = document.querySelector("#takePhoto")// 截图 按钮
takePhoto.addEventListener('click', function (e) {
  // 绘制原始 Canvas 的内容到新的 Canvas 上
  ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height);
  // 将内容转换为数据 URL
  const dataURL = canvas.toDataURL();
  // 创建一个 <a> 元素并设置属性
  const link = document.createElement('a');
  link.href = dataURL;
  link.download = 'screenshot.png'; // 设置要保存的文件名
  // 模拟点击 <a> 元素来触发下载
  link.click();
})

完整代码

<!DOCTYPE html>
<html>
<head>
  <title>Canvas Demo</title>
  <style>
    button {
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      overflow: hidden;
      user-select: none;
      outline: none;
      border: none;
      padding: 16px;
      background-color: #1d93ab;
      color: #fff;
    }
    button:focus {
      background-color: #e88f21
    }
  </style>
</head>
<body>
  <div>
    <button data-type="gray">反转</button>
    <button data-type="blackwhite">黑白</button>
    <button data-type="brightness">亮度</button>
    <button data-type="sepia">复古</button>
    <button data-type="redMask">红色</button>
    <button data-type="greenMask">绿色</button>
    <button data-type="blueMask">蓝色</button>
    <button data-type="opacity">透明</button>
    <button data-type="mosaic">马赛克</button>
    <button data-type="linearGradient">渐变</button>
    <button id="takePhoto">拍摄</button>
  </div>
  <video id="videoElement" autoplay></video>
  <canvas id="canvasElement"></canvas>
  <script>
    // 获取视频元素和画布元素
    const video = document.getElementById('videoElement');
    const canvas = document.getElementById('canvasElement');
    const ctx = canvas.getContext('2d');
    const buttons = document.querySelectorAll("button[data-type]");
    const takePhoto = document.querySelector("#takePhoto")// 截图 按钮
    let drawType = ""
    // 当视频元素加载完成后执行
    video.addEventListener('loadedmetadata', function () {
      // 设置画布大小与视频尺寸相同
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
    });
    // 在每一帧绘制视频画面到画布上
    function drawFrame() {
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      let imageObj = ctx.getImageData(0, 0, canvas.width, canvas.height);
      if (drawType === "gray") {
        // 反转
        for (let i = 0; i < imageObj.data.length; i += 4) {
          imageObj.data[i + 0] = 255 - imageObj.data[i + 0];
          imageObj.data[i + 1] = 255 - imageObj.data[i + 1];
          imageObj.data[i + 2] = 255 - imageObj.data[i + 2];
        }
        ctx.putImageData(imageObj, 0, 0)
      }
      if (drawType === "blackwhite") {
        // 黑白
        for (let i = 0; i < imageObj.data.length; i += 4) {
          const average = (imageObj.data[i + 0] + imageObj.data[i + 1] + imageObj.data[i + 2] + imageObj.data[i + 3]) / 3;
          imageObj.data[i + 0] = average;//红
          imageObj.data[i + 1] = average; //绿
          imageObj.data[i + 2] = average; //蓝
        }
        ctx.putImageData(imageObj, 0, 0)
      }
      if (drawType === "brightness") {
        // 亮度
        for (let i = 0; i < imageObj.data.length; i += 4) {
          const a = 50;
          imageObj.data[i + 0] += a;
          imageObj.data[i + 1] += a;
          imageObj.data[i + 2] += a;
        }
        ctx.putImageData(imageObj, 0, 0)
      }
      if (drawType === "sepia") {
        // 复古
        for (let i = 0; i < imageObj.data.length; i += 4) {
          const r = imageObj.data[i + 0];
          const g = imageObj.data[i + 1];
          const b = imageObj.data[i + 2];
          imageObj.data[i + 0] = r * 0.39 + g * 0.76 + b * 0.18;
          imageObj.data[i + 1] = r * 0.35 + g * 0.68 + b * 0.16;
          imageObj.data[i + 2] = r * 0.27 + g * 0.53 + b * 0.13;
        }
        ctx.putImageData(imageObj, 0, 0)
      }
      if (drawType === "redMask") {
        // 红色
        for (let i = 0; i < imageObj.data.length; i += 4) {
          const r = imageObj.data[i + 0]
          const g = imageObj.data[i + 1]
          const b = imageObj.data[i + 2]
          const average = (r + g + b) / 3
          imageObj.data[i + 0] = average
          imageObj.data[i + 1] = 0
          imageObj.data[i + 2] = 0
        }
        ctx.putImageData(imageObj, 0, 0)
      }
      if (drawType === "greenMask") {
        // 绿色
        for (let i = 0; i < imageObj.data.length; i += 4) {
          const r = imageObj.data[i + 0]
          const g = imageObj.data[i + 1]
          const b = imageObj.data[i + 2]
          const average = (r + g + b) / 3
          imageObj.data[i + 0] = 0
          imageObj.data[i + 1] = average
          imageObj.data[i + 2] = 0
        }
        ctx.putImageData(imageObj, 0, 0)
      }
      if (drawType === "blueMask") {
        // 蓝色
        for (let i = 0; i < imageObj.data.length; i += 4) {
          const r = imageObj.data[i + 0]
          const g = imageObj.data[i + 1]
          const b = imageObj.data[i + 2]
          const average = (r + g + b) / 3
          imageObj.data[i + 0] = 0
          imageObj.data[i + 1] = 0
          imageObj.data[i + 2] = average
        }
        ctx.putImageData(imageObj, 0, 0)
      }
      if (drawType === "opacity") {
        // 透明
        for (let i = 0; i < imageObj.data.length; i += 4) {
          imageObj.data[i + 3] = imageObj.data[i + 3] * 0.3;
        }
        ctx.putImageData(imageObj, 0, 0)
      }
      if (drawType === "linearGradient") {
        // 渐变
        const data = imageObj.data;
        // 遍历每个像素
        for (let i = 0; i < data.length; i += 4) {
          const x = (i / 4) % canvas.width; // 当前像素的 x 坐标
          const y = Math.floor(i / (4 * canvas.width)); // 当前像素的 y 坐标
          // 计算当前像素的颜色值
          const r = x / canvas.width * 255; // 红色分量
          const g = y / canvas.height * 255; // 绿色分量
          const b = 128; // 蓝色分量
          const a = 100; // 不透明度
          // 设置当前像素的颜色值
          data[i] = r; // 红色分量
          data[i + 1] = g; // 绿色分量
          data[i + 2] = b; // 蓝色分量
          data[i + 3] = a; // 不透明度
        }
        ctx.putImageData(imageObj, 0, 0)
      }
      if (drawType === "mosaic") {
        // 马赛克
        ctx.imageSmoothingEnabled = false; // 禁用图像平滑处理
        const tileSize = 10; // 马赛克块的大小
        // 缩小马赛克块
        ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width / tileSize, canvas.height / tileSize);
        // 放大回原来的大小
        ctx.drawImage(canvas, 0, 0, canvas.width / tileSize, canvas.height / tileSize, 0, 0, canvas.width, canvas.height);
      }
      requestAnimationFrame(drawFrame);
      // setTimeout(drawFrame, 1000);
    }
    // 检查浏览器是否支持 getUserMedia API
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      // 请求访问摄像头
      navigator.mediaDevices.getUserMedia({ video: true })
        .then(function (stream) {
          // 将视频流绑定到视频元素上
          video.srcObject = stream;
          // 开始绘制视频画面到画布上
          requestAnimationFrame(drawFrame);
        })
        .catch(function (error) {
          console.error('无法访问摄像头:', error);
        });
    } else {
      console.error('浏览器不支持 getUserMedia API');
    }
    buttons.forEach(button => {
      button.addEventListener("click", function (e) {
        drawType = e.target.dataset.type;
      })
    })
    takePhoto.addEventListener('click', function (e) {
      // 绘制原始 Canvas 的内容到新的 Canvas 上
      ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height);
      // 将内容转换为数据 URL
      const dataURL = canvas.toDataURL();
      // 创建一个 <a> 元素并设置属性
      const link = document.createElement('a');
      link.href = dataURL;
      link.download = 'screenshot.png'; // 设置要保存的文件名
      // 模拟点击 <a> 元素来触发下载
      link.click();
    })
  </script>
</body>
</html>
文章标签：
前端开发
JavaScript
数据可视化
设计模式
小程序
万少！
目录
相关文章
音视频牛哥
|
4月前
|
传感器 API Android开发
Android摄像头采集选Camera1还是Camera2？
Camera1与Camera2是Android平台上的两种摄像头API。Camera1（API1）在Android 5.0后被标记为过时，新项目应优先选用Camera2（API2）。Camera2提供了更精细的控制选项，如曝光时间、ISO感光度等；支持多摄像头管理；采用异步操作提高应用响应速度；并支持RAW图像捕获及实时图像处理。此外，它还具备更好的适配性和扩展性，适用于各类应用场景，如相机应用开发、视频通话和计算机视觉等。因此，在现代Android开发中推荐使用Camera2。
音视频牛哥
72 0
好奇的菜鸟
|
6月前
|
前端开发
canvas与CreateJS实现图片动画
canvas与CreateJS实现图片动画
好奇的菜鸟
32 0
艾尼麻麻
|
6月前
|
API Android开发
57. 【Android教程】相机：Camera
57. 【Android教程】相机：Camera
艾尼麻麻
78 0
_揽
|
7月前
|
前端开发
canvas详解06-合成
canvas详解06-合成
_揽
68 2
_揽
|
7月前
|
前端开发 JavaScript
canvas详解08-基本动画
canvas详解08-基本动画
_揽
53 1
_揽
|
7月前
|
前端开发
canvas详解07-裁剪
canvas详解07-裁剪
_揽
69 1
snowball_win
|
前端开发 JavaScript
canvas：绘制视频封面
canvas：绘制视频封面
snowball_win
98 0
canvas：绘制视频封面
求索君
|
API Android开发
分享几个关于Camera的坑
安卓Camera应用开发填坑
求索君
81 0
杰克.陈
|
Android开发 API
Android Camera2 拍照（四）——对焦模式
原文:Android Camera2 拍照（四）——对焦模式 本篇将重点介绍使用Camera2 API进行手动对焦的设置，以及在手动对焦与自动对焦模式之间切换。
杰克.陈
3707 0
流楚丶格念
|
前端开发
canvas做动画
canvas做动画
流楚丶格念
209 0
canvas做动画

热门文章

最新文章

  • 1
    Hive之数据倾斜的原因和解决方法
  • 2
    【Java】留下没有基础眼泪的面试题
  • 3
    四大触点，教你从“用户视角”构建数据分析体系
  • 4
    CentOS7 yum的一次报错" 14: curl#56 - "Recv failure: Connection reset by peer" "
  • 5
    [软件工程导论(第六版)]第5章 总体设计（课后习题详解）
  • 6
    同步、异步、阻塞、非阻塞
  • 7
    ArcEngine控制台应用程序
  • 8
    perl学习笔记(10)
  • 9
    新疆电信新疆联通签网络合作协议
  • 10
    epoll是如何监控多个描述符及如何获得通知(2)
  • 1
    《C++数据降维之道：PCA 与 t - SNE 助力信息留存》
    38
  • 2
    「Mac畅玩鸿蒙与硬件44」UI互动应用篇21 - 随机励志语录生成器
    53
  • 3
    《C++赋能智能摄像头：开启实时视频分析新纪元》
    41
  • 4
    MV-Adapter：上交大、北航和 VAST 等联合开源多视图一致图像生成模型，将预训练的文生图扩散模型转为多视图生成器
    47
  • 5
    《C++与 BLAS、LAPACK：加速人工智能算法的线性代数秘籍》
    42
  • 6
    Manga Image Translator：开源的漫画文字翻译工具，支持多语言翻译并嵌入原图，保持漫画的原始风格和布局
    33
  • 7
    NodeTool：AI 工作流可视化构建器，通过拖放节点设计复杂的工作流，集成 OpenAI 等多个平台
    34
  • 8
    《C++与 Armadillo：线性代数助力人工智能算法简化之路》
    24
  • 9
    ColorFlow：腾讯和清华大学联合推出的图像序列着色模型，通过参考图像的颜色对黑白漫画进行着色生成彩色漫画
    35
  • 10
    《C++与 ONNX：构建跨平台推理引擎的智慧融合》
    22

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 快速实现摄像头视频画面的远程预览
    • 下一篇
    阿里云oss存储简介和如何使用