代碼:
頁面布局:
<div id='takePhoto' >
<div id='support'></div>
<div id='contentHolder'>
<video id='video' width='352' height='496' style='border:1px solid gray;float: left;' autoplay></video>
<div id='imageBox' class='imageBox1'>
<canvas id='canvas'></canvas>
<div class='thumbBox1'></div>
</div>
<div style="clear: both;width: 352px;text-align: center">
<el-button id='snap' class= 'my-button' @click="takePhoto">拍照</el-button>
<el-button id='snap2' style='display: none;' class='my-button' @click="retakePhoto">重新拍照</el-button>
</div>
<div id='cropped1' class='cropped1' style='display: none;'>
</div>
</div>
</div>
js代碼:
created() {
this.getVideo();
},
methods: {
getVideo() {
var video = $('#video');
var videoObj = { 'video': true };
var errBack = function(error) {
console.log('Video capture error: ' + error.message, error.code);
};
var stre;
var mediaStream;
// 支持瀏覽器 谷歌,火狐,360,歐朋
// navigator.getUserMedia這個寫法在Opera中好像是navigator.getUserMedianow
if (navigator.getUserMedia) {
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
stre = stream;
video.trigger('play');
}, errBack);
} else if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(videoObj, function(stream) {
video.src = window.URL.createObjectURL(stream);
mediaStream = stream;
stre = stream;
video.trigger('play');
}, errBack);
} else if (navigator.mozGetUserMedia) {
navigator.mozGetUserMedia(videoObj, function(stream) {
video.src = window.URL.createObjectURL(stream);
mediaStream = stream;
stre = stream;
video.trigger('play');
}, errBack);
}
},
// 點擊拍照
takePhoto() {
var img_src;
$('#video').hide();
$('#snap').hide();
$('#snap2').show();
$('#imageBox').show();
$('#action').show();
$('#cropped1').show();
var canvans = $('#canvas');
var video = $('#video');
var context = canvans.get(0).getContext('2d');
canvans.width(219);
canvans.height(413);
context.drawImage(video, 0, 0);
// 獲取瀏覽器頁面的畫布對象
// 以下開始編 數(shù)據(jù)
var imgData = document.getElementsByTagName('canvas')[0].toDataURL('image/jpg');
// 將圖像轉(zhuǎn)換為base64數(shù)據(jù)
var base64Data = imgData.split(',')[1];
$('#canvas').hide();
var options1 = {
thumbBox: '.thumbBox1',
spinner: '.spinner',
imgSrc: imgData
}
},
// 點擊重新拍照
retakePhoto() {
this.getVideo();
$('#video').show();
$('#snap').show();
$('#snap2').hide();
$('#imageBox').hide();
$('#action').hide();
$('#cropped1').hide();
}
}
第一次報錯:
加了[0]
修改后:
問題:看不到攝像頭獲取的圖像。
你試下這個例子:
html:
<div>
<video ref="video" width="320" height="320" autoplay></video>
<input type="button" style="width:100px;height:35px;" value="拍 照" @click="takePhoto"/>
</di>
<canvas style="" ref="canvas" width="320" height="320"></canvas>
</div>
主要的js:
getVideo(){
this.$nextTick(() => {
var video = this.$refs.video; //這個對應(yīng)的是ref屬性
var videoObj = { "video": true };
navigator.mediaDevices.getUserMedia(videoObj)
.then(function(mediaStream) {
video.srcObject = mediaStream;
video.play();
})
.catch(function(error) {
console.log(error);
})
})
},
takePhoto(){
this.$nextTick(() => {
this.context = this.$refs.canvas.getContext("2d")
this.context.drawImage(this.$refs.video, 0, 0, 330, 250);
})
}
如果需要click事件還是用@click形式吧。。
北大青鳥APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景,秉承“教育改變生活”的發(fā)展理念,致力于培養(yǎng)中國IT技能型緊缺人才,是大數(shù)據(jù)專業(yè)的國家
北大青鳥中博軟件學(xué)院創(chuàng)立于2003年,作為華東區(qū)著名互聯(lián)網(wǎng)學(xué)院和江蘇省首批服務(wù)外包人才培訓(xùn)基地,中博成功培育了近30000名軟件工程師走向高薪崗位,合作企業(yè)超4
中公教育集團(tuán)創(chuàng)建于1999年,經(jīng)過二十年潛心發(fā)展,已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術(shù)與教育服務(wù)機構(gòu),發(fā)展為教育服務(wù)業(yè)的綜合性企業(yè)集團(tuán),成為集合面授教學(xué)培訓(xùn)、網(wǎng)
達(dá)內(nèi)教育集團(tuán)成立于2002年,是一家由留學(xué)海歸創(chuàng)辦的高端職業(yè)教育培訓(xùn)機構(gòu),是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市,融資1
曾工作于聯(lián)想擔(dān)任系統(tǒng)開發(fā)工程師,曾在博彥科技股份有限公司擔(dān)任項目經(jīng)理從事移動互聯(lián)網(wǎng)管理及研發(fā)工作,曾創(chuàng)辦藍(lán)懿科技有限責(zé)任公司從事總經(jīng)理職務(wù)負(fù)責(zé)iOS教學(xué)及管理工作。
浪潮集團(tuán)項目經(jīng)理。精通Java與.NET 技術(shù), 熟練的跨平臺面向?qū)ο箝_發(fā)經(jīng)驗,技術(shù)功底深厚。 授課風(fēng)格 授課風(fēng)格清新自然、條理清晰、主次分明、重點難點突出、引人入勝。
精通HTML5和CSS3;Javascript及主流js庫,具有快速界面開發(fā)的能力,對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開發(fā)經(jīng)驗。曾經(jīng)歷任德國Software AG 技術(shù)顧問,美國Dachieve 系統(tǒng)架構(gòu)師,美國AngelEngineers Inc. 系統(tǒng)架構(gòu)師。