摘要:来一个简单粗暴的演示图先来内容拍张照片呗一个一个然后内容把设备启动下绑定下按钮按钮获取点击时的帧,和添加一下水印有一个姑娘在这样就结束了附上全部代码要多简单就有多简单的拍照加水印拍张照片呗有一个姑娘在附上我的订阅号二维码,持续分享
来一个简单粗暴的gif演示图
先来html 内容
一个video 一个canvas
然后js内容
把设备启动下
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: "有一个姑娘在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);
}
这样就结束了
附上全部代码
要多简单就有多简单的H5拍照加水印 - video,canvas{
- border: 1px solid #ccc;
- }
- 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: "有一个姑娘在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();
附上我的订阅号二维码,持续分享内容哦
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/11016.html
摘要:来一个简单粗暴的演示图先来内容拍张照片呗一个一个然后内容把设备启动下绑定下按钮按钮获取点击时的帧,和添加一下水印有一个姑娘在这样就结束了附上全部代码要多简单就有多简单的拍照加水印拍张照片呗有一个姑娘在附上我的订阅号二维码,持续分享 showImg(https://segmentfault.com/img/bVDWNT?w=640&h=400); 来一个简单粗暴的gif演示图 先来htm...
摘要:拍照党福利驾到华为云微认证教你实现图片压缩和水印添加在手机拍照成为日常的今天,用照片记录生活已成为人们的一种习惯。华为云微认证将总共送出个免费机会,奖项公布时间月日。 拍照党福利驾到 华为云微认证教你实现图片压缩和水印添加 在手机拍照成为日常的今天,用照片记录生活已成为人们的一种习惯。拍照容易处理难,面对手机相册中大量的照片,你是否也苦恼过?删,舍不得;上传,会不会被盗图?能否发出足够...
摘要:有时候我想在图片上添加自己的水印来防止别人盗图,所以今天给大家分享如何用给我们的图片添加上水印。我们先来看看效果。可以看到右下角就有了我们公众号的名称的水印,是不是超级厉害那我们看看代码吧,也就行不到。 有时候我想在图片上添加自己的水印来防止别人盗图,所以今天给大家分享如何用python给我们的图片添加上水印。我们先来看看效果。 showImg(https://segmentfault...
阅读 2076·2021-09-30 09:46
阅读 1447·2019-08-30 15:43
阅读 1217·2019-08-29 13:28
阅读 2013·2019-08-29 11:24
阅读 1797·2019-08-26 13:22
阅读 4178·2019-08-26 12:01
阅读 1897·2019-08-26 11:33
阅读 3307·2019-08-23 15:34