Javascript melaksanakan pengambilan foto-Soal Jawab bahagian hadapan-php.cn

Javascript melaksanakan pengambilan foto

PHPz

Lepaskan： 2023-05-17 18:49:38

asal

1080 orang telah melayarinya

JavaScript ialah bahasa skrip berdasarkan pelayar web yang boleh digunakan untuk membangunkan pelbagai halaman web interaktif dan dinamik. Bahasa ini boleh digunakan untuk membuat pop timbul dalam halaman web, mengesahkan input pengguna, memanipulasi elemen halaman secara interaktif dan banyak lagi. Artikel ini akan memperkenalkan anda cara menggunakan JavaScript untuk mengambil foto.

Untuk melaksanakan JavaScript untuk mengambil foto, kami perlu menggunakan API WebRTC. WebRTC ialah protokol komunikasi masa nyata Web Ia adalah platform teknologi sumber terbuka dan mudah digunakan yang boleh merealisasikan komunikasi titik ke titik (P2P), audio dan video masa nyata, penghantaran data, perkongsian fail dan lain-lain. fungsi. Menggunakan platform ini, kami boleh membuat panggilan audio dan video dalam penyemak imbas tanpa memuat turun dan memasang sebarang pemalam atau perisian.

Langkah 1: Sediakan kod HTML dan CSS

Mula-mula, kita perlu menambah tag video pada fail HTML untuk memaparkan video yang dipantau oleh kamera dalam masa nyata. Di sini kami menetapkan lebar dan ketinggian teg video dan menambah beberapa gaya CSS padanya.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>拍照片</title>

    <style>
      video {
        width: 100%;
        height: auto;
        max-height: 480px;
        border: 1px solid #ccc;
      }

      button {
        width: 100%;
        height: 40px;
        margin-top: 10px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div>
      <video id="video" autoplay></video>
      <button id="snap">拍照</button>
    </div>

    <script src="script.js"></script>
  </body>
</html>

Salin selepas log masuk

Langkah 2: Sediakan kod JavaScript

Dalam fail HTML, kami telah memperkenalkan skrip fail JavaScript.js. Dalam fail ini, kita perlu menggunakan fungsi getUserMedia(), yang digunakan untuk mendapatkan data penstriman peranti media pengguna. Fungsi getUserMedia() perlu lulus parameter, iaitu objek peranti media yang digunakan untuk menentukan jenis data strim yang akan diperolehi (seperti mikrofon, kamera, dsb.).

Apabila pengguna membenarkan tapak web menggunakan kamera, kami boleh memainkan video dalam masa nyata pada halaman. Seterusnya, kami boleh menambah pendengar acara klik pada butang "Foto" Apabila pengguna mengklik butang "Foto", kami boleh menggunakan API Kanvas untuk menangkap bingkai semasa daripada video dan menyimpannya sebagai URL data berkod Base64. .

const video = document.getElementById('video');
const snap = document.getElementById('snap');

// 获取用户摄像头的流数据
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
  .then(function(stream) {
    // 在video标签中播放实时视频
    video.srcObject = stream;
    video.play();
  })
  .catch(function(err) {
    console.log('Error: ' + err);
  });

// 截取当前帧并保存为Base64编码的数据URL
function takeSnapshot() {
  const canvas = document.createElement('canvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;

  const context = canvas.getContext('2d');
  context.drawImage(video, 0, 0, canvas.width, canvas.height);

  const dataURL = canvas.toDataURL('image/png');

  // 显示截图
  const img = document.createElement('img');
  img.src = dataURL;
  document.body.appendChild(img);

  // 保存截图
  const link = document.createElement('a');
  link.href = dataURL;
  link.download = 'snapshot.png';
  link.click();
}

snap.addEventListener('click', takeSnapshot);

Salin selepas log masuk

Langkah 3: Jalankan kod

Sekarang, kami mempunyai semua kod sedia untuk dijalankan dalam penyemak imbas. Gunakan penyemak imbas yang menyokong WebRTC (seperti Chrome atau Firefox) untuk mengakses fail HTML ini, klik butang "Ambil Foto" dan anda boleh menangkap foto dari kamera. Foto ini boleh dipaparkan pada halaman atau dimuat turun dan disimpan.

Ringkasan

Dengan menggunakan API WebRTC dan API Kanvas, kami boleh melaksanakan fungsi pengambilan foto JavaScript dengan mudah. Ciri ini boleh digunakan dalam pelbagai aplikasi web seperti aplikasi kamera dalam talian, media sosial, sembang video dan banyak lagi.

Atas ialah kandungan terperinci Javascript melaksanakan pengambilan foto. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!