要多簡(jiǎn)單就有多簡(jiǎn)單的H5拍照加水印

來(lái)一個(gè)簡(jiǎn)單粗暴的gif演示圖

先來(lái)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)容
把設(shè)備啟動(dòng)下

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();}

綁定下按鈕
按鈕獲取點(diǎn)擊時(shí)的幀，和添加一下水印

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)容哦

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

开心六月综合激情婷婷|欧美精品成人动漫二区|国产中文字幕综合色|亚洲人在线成视频