jquery怎麼調用照相機

前言

現在的手機有了高畫質相機功能，我們經常需要在網頁上使用相機來拍照、掃描二維碼等等。本文將介紹如何使用 jQuery 呼叫照相機。

步驟一：定義頁面佈局

首先，需要在頁面中定義一個可以顯示照片的區域，如下：

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

這裡我們使用了一個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="/static/imghwm/default1.png" data-src="'+imageData+'" class="lazy"    style="max-width:90%" alt="jquery怎麼調用照相機" >');
        },
        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() 方法來啟動相機，並取得照片。此方法接受三個參數：

• 成功取得照片後的回呼函數
• 取得照片失敗後的回呼函數
• 指定拍照的參數

點選頁面元素後即可呼叫相機了。

總結

使用 jQuery 呼叫相機還是比較簡單的，只需要引入必要的函式庫檔案並編寫一小段 JavaScript 程式碼。不過要注意的是，該功能只支援在手機瀏覽器中使用，不支援在電腦瀏覽器中使用。

以上是jquery怎麼調用照相機的詳細內容。更多資訊請關注PHP中文網其他相關文章！