vue調(diào)用攝像頭進(jìn)行拍照并能保存到本地的方法
更新時(shí)間：2022年04月11日 08:26:09 作者：小皮豬
本文主要介紹了vue調(diào)用攝像頭進(jìn)行拍照并能保存到本地的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
1. 使用Vue.js
把網(wǎng)頁(yè)內(nèi)容Ctrl+s保存到本地然后添加到項(xiàng)目中
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
2. 創(chuàng)建目錄
3.實(shí)現(xiàn)：
1. index.html
代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="vueapp"> <video ref="video" autoplay width="400" height="300"></video> <button @click="btnTakePhotoClicked()">Take photo</button> <canvas ref="canvas"width="400" height="300"></canvas> <a href="" download="canvas.jpeg" id="save_herf"> <img src="" id="save_img" alt=""> </a> </div> <script src="app.js"></script> </body> </html>
2. app.js
代碼：
new Vue({
el:"#vueapp",
mounted(){
this._initVueApp();
this.btnTakePhotoClicked();
},
methods:{
async _initVueApp(){
this.$refs.video.srcObject= await navigator.mediaDevices.getUserMedia({video:true,audio:false});
this._context2d=this.$refs.canvas.getContext("2d");
this.canvas=this.$refs.canvas;
},
btnTakePhotoClicked(){
this._context2d.drawImage(this.$refs.video,0,0,400,300)
var img = document.createElement("img"); // 創(chuàng)建img元素
img.src =this.canvas.toDataURL("image/png"); // 截取視頻第一幀
var svaeHref = document.getElementById("save_herf");
console.log(img.src)
var sd=document.getElementById("save_img");
svaeHref.href = img.src;
sd.src=img.src
},
}
});4.效果
到此這篇關(guān)于vue調(diào)用攝像頭進(jìn)行拍照并能保存到本地的方法的文章就介紹到這了,更多相關(guān)vue調(diào)用攝像頭拍照并保存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue設(shè)置動(dòng)態(tài)請(qǐng)求地址的例子
今天小編就為大家分享一篇vue設(shè)置動(dòng)態(tài)請(qǐng)求地址的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了Vite的原理，Vite是一個(gè)更輕、更快的web應(yīng)用開發(fā)工具，面向現(xiàn)代瀏覽，Vite創(chuàng)建的項(xiàng)目是一個(gè)普通的Vue3應(yīng)用，相比基于Vue-cli創(chuàng)建的應(yīng)用少了很多配置文件和依賴，下面基于Vite相關(guān)資料內(nèi)容，需要的朋友可以參考一下2022-02-02
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁(yè)面應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于降低vue-router版本的2種解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue中使用微信jssdk，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue3?setup語(yǔ)法糖各種語(yǔ)法新特性的使用方法(vue3+vite+pinia)
這篇文章主要介紹了vue3?setup語(yǔ)法糖各種語(yǔ)法新特性的使用(vue3+vite+pinia),本文主要是記錄vue3的setup語(yǔ)法糖的各種新語(yǔ)法的使用方法,需要的朋友可以參考下2022-09-09
Vue同一路由強(qiáng)制刷新頁(yè)面的實(shí)現(xiàn)過(guò)程
這篇文章主要介紹了解決VUE同一路由強(qiáng)制刷新頁(yè)面的問(wèn)題，本文給大家分享實(shí)現(xiàn)過(guò)程，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
vue項(xiàng)目中vant tab改變標(biāo)簽顏色方式
這篇文章主要介紹了vue項(xiàng)目中vant tab改變標(biāo)簽顏色方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-04-04
這篇文章主要介紹了Vue中使用setTimeout問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
el-table表頭根據(jù)內(nèi)容自適應(yīng)完美解決表頭錯(cuò)位和固定列錯(cuò)位
這篇文章主要介紹了el-table表頭根據(jù)內(nèi)容自適應(yīng)完美解決表頭錯(cuò)位和固定列錯(cuò)位,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了Vue3.x中使用element-plus的各種方式詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04