Bagaimana untuk memanggil kamera dengan jquery

Kata Pengantar

Kini, telefon mudah alih mempunyai fungsi kamera definisi tinggi Kita sering perlu menggunakan kamera pada halaman web untuk mengambil foto, mengimbas kod QR, dsb. Artikel ini menerangkan cara menggunakan jQuery untuk memanggil kamera.

Langkah 1: Tentukan reka letak halaman

Mula-mula, anda perlu menentukan kawasan dalam halaman di mana foto boleh dipaparkan, seperti berikut:

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

Di sini kami menggunakan div elemen , dan berikannya ID untuk panggilan akan datang.

Langkah 2: Perkenalkan fail perpustakaan yang diperlukan

Untuk menggunakan jQuery untuk memanggil kamera, kami perlu memperkenalkan beberapa fail perpustakaan yang diperlukan:

<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>

Di sini, kami menggunakan jQuery Dan jQuery Mobile dua fail perpustakaan.

Langkah 3: Panggil kamera

Selepas halaman dimuatkan, kami perlu menulis kod JavaScript untuk memanggil kamera. Kodnya adalah seperti berikut:

$(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
        }
    );
});

Dalam kod di atas, kami menggunakan kaedah document jQuery untuk mendengar acara #main-page halaman ini. Apabila halaman ini akan dipaparkan, kod dalam fungsi ini akan dicetuskan. pagebeforeshow

Secara dalaman, kami memanggil kaedah

untuk memulakan kamera dan mendapatkan foto. Kaedah ini menerima tiga parameter: navigator.camera.getPicture()

Fungsi panggil balik selepas berjaya mendapatkan foto
• Fungsi panggil balik selepas kegagalan untuk mendapatkan foto
• Nyatakan parameter untuk mengambil gambar

Kamera boleh dipanggil selepas mengklik pada elemen halaman.

Ringkasan

Menggunakan jQuery untuk memanggil kamera agak mudah Anda hanya perlu memperkenalkan fail perpustakaan yang diperlukan dan menulis sekeping kecil kod JavaScript. Walau bagaimanapun, perlu diingatkan bahawa fungsi ini hanya menyokong penggunaan dalam pelayar mudah alih dan tidak menyokong penggunaan dalam pelayar komputer.

Atas ialah kandungan terperinci Bagaimana untuk memanggil kamera dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!