jQueryでカメラを呼び出す方法

はじめに

現在、携帯電話には高精細なカメラ機能が搭載されており、Webページのカメラを使って写真を撮ったり、QRコードをスキャンしたりする必要がよくあります。この記事では、jQuery を使用してカメラを呼び出す方法について説明します。

ステップ 1: ページ レイアウトを定義する

まず、次のように、写真を表示できるページ内の領域を定義する必要があります。

<div id="camera-area"></div>

ここでは、 div 要素を追加し、後で呼び出せるように ID を割り当てます。

ステップ 2: 必要なライブラリ ファイルを導入する

jQuery を使用してカメラを呼び出すには、いくつかの必要なライブラリ ファイルを導入する必要があります:

<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css"></script>

ここでは、 jQuery と jQuery Mobile の 2 つのライブラリ ファイル。

ステップ 3: カメラを呼び出す

ページが読み込まれた後、カメラを呼び出すための JavaScript コードを記述する必要があります。コードは次のとおりです。

$(document).on('pagebeforeshow','#main-page',function(){
    navigator.camera.getPicture(
        function(imageData) {
            // 成功获取照片后的回调函数
            $('#camera-area').html('<img src="'+imageData+'" width="100%">');
        },
        function(message) {
            // 获取照片失败后的回调函数
            alert('获取照片失败！错误信息：'+message);
        },
        {
            quality: 100,
            destinationType: navigator.camera.DestinationType.DATA_URL,
            sourceType: navigator.camera.PictureSourceType.CAMERA,
            encodingType: navigator.camera.EncodingType.JPEG,
            mediaType: navigator.camera.MediaType.PICTURE
        }
    );
});

上記のコードでは、jQuery の document メソッドを使用して、#main-page# の pagebeforeshow イベントをリッスンします。 ## 。このページが表示される直前に、この関数のコードがトリガーされます。

内部的には、

navigator.camera.getPicture() メソッドを呼び出してカメラを起動し、写真を取得します。このメソッドは 3 つのパラメータを受け入れます:

写真の取得に成功した後のコールバック関数
• 写真の取得に失敗した後のコールバック関数
• 写真を取得するためのパラメータを指定しますphotos

ページ要素をクリックするとカメラを呼び出すことができます。

概要

jQuery を使用してカメラを呼び出すのは比較的簡単で、必要なライブラリ ファイルを導入し、小さな JavaScript コードを記述するだけです。ただし、この機能はモバイルブラウザでの利用のみをサポートしており、コンピュータブラウザでの利用はサポートしていないことに注意してください。

以上がjQueryでカメラを呼び出す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。