vue調用攝像頭進行拍照并能保存到本地的方法
更新時間：2022年04月11日 08:26:09 作者：小皮豬
本文主要介紹了vue調用攝像頭進行拍照并能保存到本地的方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
1. 使用Vue.js
把網(wǎng)頁內容Ctrl+s保存到本地然后添加到項目中
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
2. 創(chuàng)建目錄
3.實現(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.效果
到此這篇關于vue調用攝像頭進行拍照并能保存到本地的方法的文章就介紹到這了,更多相關vue調用攝像頭拍照并保存內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
今天小編就為大家分享一篇vue設置動態(tài)請求地址的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vite的原理，Vite是一個更輕、更快的web應用開發(fā)工具，面向現(xiàn)代瀏覽，Vite創(chuàng)建的項目是一個普通的Vue3應用，相比基于Vue-cli創(chuàng)建的應用少了很多配置文件和依賴，下面基于Vite相關資料內容，需要的朋友可以參考一下2022-02-02
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構建單頁面應用,下面這篇文章主要給大家介紹了關于降低vue-router版本的2種解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue中使用微信jssdk，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
vue3?setup語法糖各種語法新特性的使用方法(vue3+vite+pinia)
這篇文章主要介紹了vue3?setup語法糖各種語法新特性的使用(vue3+vite+pinia),本文主要是記錄vue3的setup語法糖的各種新語法的使用方法,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了解決VUE同一路由強制刷新頁面的問題，本文給大家分享實現(xiàn)過程，通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue項目中vant tab改變標簽顏色方式，具有很好的參考價值，希望對大家有所幫助。2022-04-04
這篇文章主要介紹了Vue中使用setTimeout問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
el-table表頭根據(jù)內容自適應完美解決表頭錯位和固定列錯位
這篇文章主要介紹了el-table表頭根據(jù)內容自適應完美解決表頭錯位和固定列錯位,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要介紹了Vue3.x中使用element-plus的各種方式詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04