您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關(guān)使用vue如何實(shí)現(xiàn)集成webcamjs,小編覺(jué)得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說(shuō),跟著小編一起來(lái)看看吧。
第一步: Photo.vue 組件
<template> <div> <div id="results">Your captured image will appear here...</div> <h2>WebcamJS Test Page</h2> <h4>Demonstrates simple 320x240 capture & display</h4> <div id="my_camera"></div> <form> <input type=button value="拍照" @click="take_snapshot()"> </form> </div> </template>
<script> import '../assets/webcamjs/webcam.js' export default { name: 'TakePhoto', data() { return{ } }, methods: { take_snapshot: function () { // take snapshot and get image data Webcam.snap( function(data_uri) { // display results in pages document.getElementById('results').innerHTML = '<h3>Here is your image:</h3>' + '<img src="'+data_uri+'"/>'; } ); } }, mounted() { Webcam.set({ width: 320, height: 240, image_format: 'jpeg', jpeg_quality: 90 }); Webcam.attach( '#my_camera' ); } } </script>
第二部:使用
<template> <div id="app"> <Photo></Photo> </div> </template>
<script> import Photo from './components/Photo' export default { name: 'app', components: { Photo } } </script>
結(jié)果演示
補(bǔ)充知識(shí):vue網(wǎng)頁(yè)調(diào)用手機(jī)攝像頭,webview如何實(shí)現(xiàn)
近期有個(gè)需求,通過(guò)vue的網(wǎng)頁(yè)調(diào)用手機(jī)攝像頭,拍攝完成后,傳回照片給vue。
作為剛開(kāi)始接觸安卓的小白,看了非常多的案例,都是新建camera類,處理拍照、拍視頻、查看照片等操作。而我的需求非常簡(jiǎn)單,就是點(diǎn)擊按鈕,拍照,給網(wǎng)頁(yè)返回照片而已,不需要如此復(fù)雜的操作,于是嘗試著用簡(jiǎn)單的方式完成調(diào)用攝像頭的功能。
(1)vue端,增加一個(gè)a標(biāo)簽,設(shè)置跳轉(zhuǎn)關(guān)鍵字camera,這個(gè)是安卓識(shí)別要調(diào)用攝像頭的關(guān)鍵點(diǎn)。
(2)手機(jī)端,接受a標(biāo)簽的跳轉(zhuǎn),注:a標(biāo)簽調(diào)用一般會(huì)去調(diào)用WebViewClient的onPageFinished方法,但是此時(shí)的跳轉(zhuǎn)屬于非常規(guī)跳轉(zhuǎn),故采用`camera:`標(biāo)識(shí)此次的跳轉(zhuǎn),然后就會(huì)調(diào)用WebViewClient的shouldOverrideUrlLoading方法攔截此次跳轉(zhuǎn),具體寫法如下:
基本上就是判斷跳轉(zhuǎn)連接中是否包含camera字段了,包含即調(diào)用監(jiān)聽(tīng)事件,利用監(jiān)聽(tīng)事件調(diào)用手機(jī)的攝像頭,Intent it = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);即可。
不過(guò)問(wèn)題在于WebViewClient的shouldOverrideUrlLoading方法返回對(duì)象是boolean類型,那么,我們需要返回的是圖片路徑或者圖片本身,也可以是base64處理過(guò)的流,這個(gè)類型的返回值對(duì)我們沒(méi)有太多意義,所以設(shè)置一個(gè)全局變量imageUri,在拍照之前給其賦值,在回調(diào)時(shí)就利用這個(gè)路徑可以得到想要的所有格式的圖片數(shù)據(jù)了。
(3)上圖,最后一步,完成了就可以直接去vue端接收?qǐng)D片了。
以上就是使用vue如何實(shí)現(xiàn)集成webcamjs,小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。