So rufen Sie die Kamera mit jquery auf

Vorwort

Heutzutage verfügen Mobiltelefone über hochauflösende Kamerafunktionen. Auf Webseiten müssen wir häufig Kameras verwenden, um Fotos aufzunehmen, QR-Codes zu scannen usw. In diesem Artikel wird erläutert, wie Sie mit jQuery die Kamera aufrufen.

Schritt 1: Definieren Sie das Seitenlayout

Zunächst müssen Sie einen Bereich auf der Seite definieren, in dem Fotos angezeigt werden können, wie folgt:

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

Hier verwenden wir ein div-Element und weisen es zu eine ID für zukünftige Anrufe. div 元素，并给它指定了一个 ID，以便日后调用。

步骤二：引入必要的库文件

为了能够使用 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 两个库文件。

步骤三：调用照相机

在页面加载完成后，我们需要编写一段 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()

Schritt 2: Notwendige Bibliotheksdateien einführen

• Um jQuery zum Aufrufen der Kamera zu verwenden, müssen wir einige notwendige Bibliotheksdateien einführen:
rrreee
• Hier verwenden wir zwei Bibliotheksdateien, jQuery und jQuery Mobile.
• Schritt 3: Rufen Sie die Kamera an

Nachdem die Seite geladen ist, müssen wir einen JavaScript-Code schreiben, um die Kamera aufzurufen. Der Code lautet wie folgt:

rrreee

Im obigen Code verwenden wir die Methode document von jQuery, um das Ereignis pagebeforeshow der #main-page abzuhören. Code> Seite. Wenn diese Seite angezeigt werden soll, wird der Code in dieser Funktion ausgelöst. <p></p>Intern rufen wir die Methode <code>navigator.camera.getPicture() auf, um die Kamera zu starten und das Foto abzurufen. Diese Methode akzeptiert drei Parameter:

🎜Die Rückruffunktion nach erfolgreichem Erhalt des Fotos 🎜🎜Die Rückruffunktion nach fehlgeschlagenem Erhalt des Fotos 🎜🎜Geben Sie die Parameter zum Aufnehmen von Bildern an 🎜🎜🎜Sie können die Kamera aufrufen, nachdem Sie auf das Seitenelement geklickt haben . 🎜🎜Zusammenfassung🎜🎜Die Verwendung von jQuery zum Aufrufen der Kamera ist relativ einfach. Sie müssen lediglich die erforderlichen Bibliotheksdateien einführen und einen kleinen Teil des JavaScript-Codes schreiben. Es ist jedoch zu beachten, dass diese Funktion nur die Verwendung in mobilen Browsern unterstützt und nicht die Verwendung in Computerbrowsern. 🎜

Das obige ist der detaillierte Inhalt vonSo rufen Sie die Kamera mit jquery auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!