天天躁狠狠躁狠狠躁夜夜躁,日韩精品电影一区亚洲,欧美成人免费午夜影视

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

2016.10.12

來(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)。

打開(kāi)APP，閱讀全文并永久保存查看更多類似文章

如何使用 JavaScript 訪問(wèn)設(shè)備前后攝像頭

JS 調(diào)取攝像頭

繪制動(dòng)畫(huà) 擦除法

html5中canvas學(xué)習(xí)筆記1

H5調(diào)用本地?cái)z像頭

使用HTML5+Canvas調(diào)用IPHONE攝像頭拍照并壓縮處理

更多類似文章 >>

九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区