摄像头神奇变魔法万般特效等你解锁

前端

2023-07-04 11:05:36

揭开魔法摄像头的奥秘

认识魔法摄像头

自拍早已成为我们日常的一部分，但局限于手机的简单特效难免让人感到乏味。现在，借助 JavaScript，我们可以解锁一个更神奇的魔法摄像头，让你的自拍照焕发新生。

开启魔法之旅

准备工作：

支持 HTML5 的浏览器，如 Chrome 或 Firefox
带摄像头的设备，如笔记本电脑或智能手机

创建 HTML 文件：

新建一个名为 "magic-camera.html" 的 HTML 文件。
在 <head> 中引用 JavaScript 文件：

<script src="js/magic-camera.js"></script>

在 <body> 中添加以下代码：

<video id="video" width="640" height="480" autoplay></video>
<canvas id="canvas" width="640" height="480"></canvas>
<div id="controls">
  <button id="start-button">开始</button>
  <button id="stop-button">停止</button>
  <button id="capture-button">截图</button>
  <button id="download-button">下载</button>
</div>

创建 JavaScript 文件：

新建一个名为 "magic-camera.js" 的 JavaScript 文件。
添加以下代码：

// 获取元素
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const startButton = document.getElementById('start-button');
const stopButton = document.getElementById('stop-button');
const captureButton = document.getElementById('capture-button');
const downloadButton = document.getElementById('download-button');

// 变量
let mediaRecorder;
let chunks = [];

// 开始录制
startButton.addEventListener('click', () => {
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(stream => {
      video.srcObject = stream;
      mediaRecorder = new MediaRecorder(stream);
      mediaRecorder.start();
    })
    .catch(err => {
      console.error('无法访问摄像头：', err);
    });
});

// 停止录制
stopButton.addEventListener('click', () => {
  mediaRecorder.stop();
});

// 捕捉图像
captureButton.addEventListener('click', () => {
  ctx.drawImage(video, 0, 0, 640, 480);
});

// 下载图像
downloadButton.addEventListener('click', () => {
  const dataURL = canvas.toDataURL('image/png');
  const a = document.createElement('a');
  a.href = dataURL;
  a.download = 'magic-camera.png';
  a.click();
});