JavaScript >> Javascript 文檔 >  >> JavaScript

使用 JavaScript 自拍

在本教程中,我們將向您展示如何製作一個 JavaScript photobooth 應用程序,該應用程序使用手機、筆記本電腦或台式機上的相機拍攝圖像。我們將展示一些很棒的原生 API,它們使我們能夠在沒有任何外部依賴、第三方庫或 Flash 的情況下製作我們的項目 - 僅限原生 JavaScript!

應用程序

對於最終用戶,我們的應用程序只是您可以在任何智能手機上找到的相機應用程序的簡化版本。它使用硬件相機拍照 - 就是這樣。然而,在底層,大量的 JavaScript 魔法正在發生。這是一個高級概述:

  1. 我們使用 getUserMedia API 訪問相機輸入並從中獲取視頻流。
  2. 將攝像頭流投影到 HTML 視頻元素上。
  3. 當用戶想要拍照時,我們複製當前視頻幀並將其繪製在畫布元素上。
  4. 將畫布轉換為圖像 dataURL,然後可以在屏幕上顯示或下載為 PNG。

在下面的文章中,我們將只看代碼中更有趣的部分。如需完整源代碼,請轉到下載 此頁面頂部附近的按鈕或查看 JSfiddle 上的演示。

訪問相機

JavaScript 以 navigator.getUserMedia 方法的形式提供了用於訪問任何相機硬件的原生 API。由於它處理私有數據,因此該 API 僅在安全的 HTTPS 連接中工作,並且在繼續之前始終要求用戶許可。

如果用戶允許啟用他的相機,navigator.getUserMedia 在成功回調中給我們一個視頻流。此流由來自攝像機的原始廣播數據組成,需要使用 createObjectURL 轉換為實際可用的媒體源 方法。

navigator.getUserMedia(
    // Options
    {
        video: true
    },
    // Success Callback
    function(stream){

        // Create an object URL for the video stream and
        // set it as src of our HTLM video element.
        video.src = window.URL.createObjectURL(stream);

        // Play the video element to show the stream to the user.
        video.play();

    },
    // Error Callback
    function(err){

        // Most common errors are PermissionDenied and DevicesNotFound.
        console.error(err);

    }
);

拍攝靜態照片

一旦我們有了視頻流,我們就可以從相機輸入中拍攝快照。這是通過一個巧妙的技巧完成的,它利用了強大的 <canvas> 用於從正在運行的視頻流中抓取一幀並將其保存在 <img> 中的元素 元素。

function takeSnapshot(){

    var hidden_canvas = document.querySelector('canvas'),
        video = document.querySelector('video.camera_stream'),
        image = document.querySelector('img.photo'),

        // Get the exact size of the video element.
        width = video.videoWidth,
        height = video.videoHeight,

        // Context object for working with the canvas.
        context = hidden_canvas.getContext('2d');

    // Set the canvas to the same dimensions as the video.
    hidden_canvas.width = width;
    hidden_canvas.height = height;

    // Draw a copy of the current frame from the video on the canvas.
    context.drawImage(video, 0, 0, width, height);

    // Get an image dataURL from the canvas.
    var imageDataURL = hidden_canvas.toDataURL('image/png');

    // Set the dataURL as source of an image element, showing the captured photo.
    image.setAttribute('src', imageDataURL); 

}

canvas 元素本身甚至不需要在 DOM 中可見。我們只是使用它的 JavaScript API 作為從視頻中捕捉靜止時刻的一種方式。

下載照片

當然,我們不僅想拍出光彩照人的自拍照,還希望能夠保存下來供後代觀看。最簡單的方法是使用 <a> 的下載屬性 元素。在 HTML 中,按鈕如下所示:

<a id="dl-btn" href="#" download="glorious_selfie.png">Save Photo</a>

download 屬性將我們的錨點從超鏈接轉換為下載按鈕。它的值代表默認的名稱 可下載文件,實際要下載的文件存儲在 href 屬性,你可以看到它現在是空的。要在此處加載我們新拍攝的照片,我們可以使用上一節中的圖像 dataURL:

function takeSnapshot(){

    //...

    // Get an image dataURL from the canvas.
    var imageDataURL = hidden_canvas.toDataURL('image/png');

    // Set the href attribute of the download button.
    document.querySelector('#dl-btn').href = imageDataURL;
}

現在,當有人點擊該按鈕時,系統會提示他們下載一個名為 glorious_selfie.png 的文件 ,包含他們拍攝的照片。 這樣我們的小實驗就完成了!

結論

我們希望您從本教程中學到了很多東西,並且您現在受到啟發來構建一些出色的照片應用程序。與往常一樣,請隨時在下面的評論部分提出問題或分享想法!


Tutorial JavaScript 教程
  1. 當我輸入保存時,防止在單元格編輯時進行兩次保存調用[關閉]

  2. 動畫總是觸發,因為狀態總是在 React 中滾動時發生變化

  3. ES2019/ES10 特性

  4. 通過實習生獲取瀏覽器信息

  5. Web 應用程序中的離線數據入門 Pt。 3

  6. 了解如何使用 HTML 製作動畫 Fab-Button | CSS |純 JavaScript。

  7. 使用 Axios HTTP 客戶端的基本身份驗證

  1. 🎈🎊🥳感謝 30.000 位關注者!我們用#AMA 來慶祝這一點!

  2. 為單選按鈕動態插入標籤

  3. 如何使用 React Native Animated API 創建自定義滾動條

  4. 關於通過 CSS 使用或不使用 JavaScript 輔助實現具有多個選項卡的單個 HTML 頁面

  5. 代碼質量:預提交 linting

  6. 我如何保存切換狀態並且在刷新頁面後不會丟失

  7. JavaScript 事件委託比你想像的要容易

  1. 拯救非洲生命的應用程序

  2. Express.js 課程和 TypeScript 第 1 課 - 如何構建 GraphQL Api

  3. 沒有 jQuery 的 Vanilla Ajax 指南

  4. 如何在 Angular 項目中使用 vuejs 組件