在移動Web開發中,經常需要調用攝像頭進行拍照或視頻錄制。jQuery Mobile提供了一個簡單的方法,可以方便地實現這個功能。
首先,在HTML文件中引入jQuery Mobile的庫文件和jQuery庫文件:
<!-- 引入jQuery庫文件 --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- 引入jQuery Mobile庫文件 --> <link rel="stylesheet" > <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
然后,在HTML文件中添加一個按鈕,用于觸發攝像頭的調用:
<button id="btnCapture">拍照</button>
最后,在JavaScript文件中添加以下代碼:
// 點擊按鈕時,打開攝像頭 $("#btnCapture").click(function() { navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL }); }); // 調用攝像頭成功時的回調函數 function onSuccess(imageData) { var img = document.getElementById('myImage'); img.src = "data:image/jpeg;base64," + imageData; } // 調用攝像頭失敗時的回調函數 function onFail(message) { alert('調用攝像頭失敗:' + message); }
代碼說明:
- 點擊按鈕時,調用navigator.camera.getPicture()方法,打開攝像頭并調用拍照功能。
- quality:設置照片質量,值越大,照片質量越好。
- destinationType:設置返回的照片格式,這里設置為DATA_URL,表示返回base64編碼的圖片數據。
- 調用攝像頭成功時,調用onSuccess()函數,將照片顯示在頁面上。
- 調用攝像頭失敗時,調用onFail()函數,彈出提示框。
至此,就完成了使用jQuery Mobile調用攝像頭的功能。