来一个简单粗暴的gif演示图

先来html 内容

<video id="video" width="320" height="240" autoplay></video>

<button id="snap">拍张照片呗</button>

<canvas id="canvas" width="320" height="240" ></canvas>

一个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);

}

这样就结束了
附上全部代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>要多简单就有多简单的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: "有一个姑娘在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>

附上我的订阅号二维码，持续分享内容哦

要多简单就有多简单的H5拍照加水印的更多相关文章

  1. 【转】C#类的分类（静态类、实例类、嵌套类、结构、简单的抽象类、简单的密封类）

    静态类 -------------------------------------------------------------------------------- 静态类就是在class关键字前 ...

  2. CORS跨域请求之简单请求与非简单请求

    先来看一个例子 定义server01的项目,在路由表中添加一条路由记录 url(r'^getData.html$',views.get_data) 对应的视图函数 from django.shortc ...

  3. 最简单的基于FFmpeg的AVfilter样例（水印叠加）

    ===================================================== 最简单的基于FFmpeg的AVfilter样例系列文章: 最简单的基于FFmpeg的AVfi ...

  4. Python入门一：简单得不能再简单了##

    从python的语法上看,简单得不能再简单了. 想学它,请移步廖雪峰python2.7教程以及python3.这实在是最好的入门教程.参考资料太多: 外国的教程 Python 入门指南 Python ...

  5. 学python2.7简单还是python3.0简单,两者区别

    学python2.7简单还是python3.0简单,谈谈两者区别 1. 使用__future__模块 Python 3.X 引入了一些与Python 2 不兼容的关键字和特性.在Python 2中,可 ...

  6. socket.io简单入门(一.实现简单的图表推送）

    引子:随着nodejs蓬勃发展,虽然主要业务系统因为架构健壮性不会选择nodejs座位应用服务器.但是大量的内部系统却可以使用nodejs试水,大量的前端开发人员转入全堆开发也是一个因素. 研究本例主 ...

  7. kettle教程（1） 简单入门、kettle简单插入与更新。打开kettle

    本文要点:Kettle的建立数据库连接.使用kettle进行简单的全量对比插入更新:kettle会自动对比用户设置的对比字段,若目标表不存在该字段,则新插入该条记录.若存在,则更新.   Kettle ...

  8. 对 cloudwu 简单的 cstring 进行简单解析

    题外话 以前也用C写过字符串,主要应用的领域是,大字符串,文件读取方面.写的很粗暴,用的凑合着.那时候看见云风前辈的一个开源的 cstring 串. 当时简单观摩了一下,觉得挺好的.也没细看.过了较长 ...

  9. 简单搜索dfs， 简单的修剪搜索

    选择最合适的语言做一个项目是非常重要的.但,熟练的掌握自己的武器,这也是非常重要的. ========================================================= ...

随机推荐

  1. 三、Java入门

    Java入门 Java的特性和优势 特性 ​ 简单 ​ 面对对象 ​ 可移植性 优势 ​ 性能高 ​ 分布式(跨平台:Write Once .Run Anywhere) ​ 动态性(反射) ​ 多线程 ...

  2. JZ-071-把数字翻译成字符串

    把数字翻译成字符串 题目描述 给定一个数字,按照如下规则翻译成字符串:1 翻译成"a",2 翻译成"b"... 26 翻译成"z".一个数字 ...

  3. 【译】.NET 7 预览版 1 中的 ASP.NET Core 更新

    原文 | Daniel Roth 翻译 | 郑子铭 .NET 7 预览版 1 现已推出!这是 .NET 下一个主要版本的第一个预览版,其中将包括使用 ASP.NET Core 进行 Web 开发的下一 ...

  4. oracle 中的decode函数

    decode(条件,值1,返回值1,值2,返回值2,...值n,返回值n,缺省值) 该函数的含义如下:IF 条件=值1 THEN RETURN(翻译值1)ELSIF 条件=值2 THEN RETURN ...

  5. Dubbo服务框架和spring-cloud架构的优缺点

    Dubbo一.dubbo简介 Dubbo是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的RPC实现服务的输出和输入功能,可以和Spring框架无缝集成. Dubbo是一款高性能.轻 ...

  6. 联邦学习：按混合分布划分Non-IID样本

    我们在博文<联邦学习:按病态独立同分布划分Non-IID样本>中学习了联邦学习开山论文[1]中按照病态独立同分布(Pathological Non-IID)划分样本. 在上一篇博文< ...

  7. 华为交换机配置telnet、SSH

    如果网络中有一台或多台网络设备需要远程进行配置和管理,可以通过Telnet远程连接到每一台设备上,对这些网络设备进行集中的管理一维护. 一.AAA认证Telnet服务端 1.配置接口信息 <Hu ...

  8. CF698C题解

    为什么 \(n,k \leq 20\)? 我还以为是什么 \(n,k \leq 10^6\) 的厉害题/qd 看到这个队列操作很迷惑,但是仔细看看要操作 \(10^{100}\) 遍,所以我们可以直接 ...

  9. ArcMap操作随记（7）

    1.栅格分辨率调整 [重采样] 2.点集数据对插值模型精度检验 test数据→[子集要素](地统计分析)→train→[插值]→[多值提取至点]→[字段计算器](Abs([value]-[spline ...

  10. Net Framework 中托管代码与非托管代码的区别

    托管代码与非托管代码的区别 1 简单的说,就是代码被编译成MSIL后在.net的Framework下运行,同操作系统底层的交互都交给framework去做. 所谓非托管代码就是脱离了Framework ...