|
來一個(gè)簡(jiǎn)單粗暴的gif演示圖 先來html 內(nèi)容 <video id='video' width='320' height='240' autoplay></video>
<button id='snap'>拍張照片唄</button>
<canvas id='canvas' width='320' height='240' ></canvas>一個(gè)video 一個(gè)canvas 然后js內(nèi)容 init: function(){
var video = this.video;
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
});
}
this.bind();
}綁定下按鈕 font: '14px microsoft yahei',
style: 'rgba(255,255,255,0.9)',
text: '有一個(gè)姑娘在coding',
height: 240,
width: 320,
draw_pic: function(){
var self = this;
var context = self.canvas.getContext('2d');
context.drawImage(self.video, 0, 0, self.width, self.height);
context.font = self.font;
context.fillStyle = self.style;
context.fillText(self.text, self.width - 140 , self.height - 10);
}這樣就結(jié)束了 <!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>要多簡(jiǎn)單就有多簡(jiǎn)單的H5拍照加水印</title>
</head>
<style type='text/css'>
video,canvas{
border: 1px solid #ccc;
}
</style>
<body>
<video id='video' width='320' height='240' autoplay></video>
<button id='snap'>拍張照片唄</button>
<canvas id='canvas' width='320' height='240' ></canvas>
</body>
<script type='text/javascript'>
var camera = {
video: document.getElementById('video'),
canvas: document.getElementById('canvas'),
btn: document.getElementById('snap'),
font: '14px microsoft yahei',
style: 'rgba(255,255,255,0.9)',
text: '有一個(gè)姑娘在coding',
height: 240,
width: 320,
draw_pic: function(){
var self = this;
var context = self.canvas.getContext('2d');
context.drawImage(self.video, 0, 0, self.width, self.height);
context.font = self.font;
context.fillStyle = self.style;
context.fillText(self.text, self.width - 140 , self.height - 10);
},
bind: function(){
var self = this;
self.btn.addEventListener('click', function() {
self.draw_pic();
});
},
init: function(){
var video = this.video;
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
});
}
this.bind();
}
};
camera.init();
</script>
</html>附上我的訂閱號(hào)二維碼，持續(xù)分享內(nèi)容哦 |
|
|
