Comment appeler la caméra avec jquery

Préface

De nos jours, les téléphones mobiles disposent de fonctions d'appareil photo haute définition. Nous avons souvent besoin d'utiliser des appareils photo sur des pages Web pour prendre des photos, scanner des codes QR, etc. Cet article explique comment utiliser jQuery pour appeler la caméra.

Étape 1 : Définir la mise en page

Tout d'abord, vous devez définir une zone dans la page où les photos peuvent être affichées, comme suit :

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

#🎜 🎜#Ici, nous utilisons Créer un élément div et lui attribuons un identifiant afin qu'il puisse être appelé plus tard.

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()Étape 2 : Introduire les fichiers de bibliothèque nécessaires

Pour utiliser jQuery pour appeler la caméra, nous devons introduire certains fichiers de bibliothèque nécessaires :
• rrreee#🎜🎜 #Dans Ici, nous utilisons deux fichiers de bibliothèque, jQuery et jQuery Mobile.
• Étape 3 : Appeler la caméra
• Une fois la page chargée, nous devons écrire un code JavaScript pour appeler la caméra. Le code est le suivant :
rrreee

Dans le code ci-dessus, nous utilisons la méthode document de jQuery pour surveiller le de la page <code>#main-page événement pagebeforeshow . Lorsque cette page est sur le point d'être affichée, le code de cette fonction sera déclenché.

En interne, nous appelons la méthode navigator.camera.getPicture() pour démarrer l'appareil photo et obtenir la photo. Cette méthode accepte trois paramètres :

Fonction de rappel après obtention réussie de la photo

#🎜🎜#Fonction de rappel après échec d'obtention de la photo #🎜🎜##🎜🎜#Spécifier Paramètres pour prendre des photos#🎜🎜##🎜🎜##🎜🎜#Vous pouvez appeler la caméra après avoir cliqué sur l'élément de la page. #🎜🎜##🎜🎜#Résumé#🎜🎜##🎜🎜#Utiliser jQuery pour appeler la caméra est relativement simple. Il vous suffit d'introduire les fichiers de bibliothèque nécessaires et d'écrire un petit morceau de code JavaScript. Cependant, il convient de noter que cette fonction ne prend en charge que l'utilisation dans les navigateurs mobiles et ne prend pas en charge l'utilisation dans les navigateurs informatiques. #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!