来一个简单粗暴的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. 小白上手Linux系统安装jdk教程

    1.查看是否有预装jdk及jdk版本: rpm -qa|grep jdk 如果有则卸载安装:rpm -e --nodeps jdk-1.7.0_79-fcs.x86_64 2.先将linux版的jdk ...

  2. LeetCode-018-四数之和

    四数之和 题目描述:给定一个包含 n 个整数的数组 nums 和一个目标值 target,判断 nums 中是否存在四个元素 a,b,c 和 d ,使得 a + b + c + d 的值与 targe ...

  3. LeetCode-049-字母异位词分组

    字母异位词分组 题目描述:给定一个字符串数组,将字母异位词组合在一起.字母异位词指字母相同,但排列不同的字符串. 示例说明请见LeetCode官网. 来源:力扣(LeetCode) 链接:https: ...

  4. SQL Server--设置用IP地址登录

    问题概述:新安装的SQL Server数据库无法用IP地址登录. 是因为 SQL Server  "服务器网络实用工具"中禁用了"命名管道"所致! 在sqlse ...

  5. CSRF、DDos避免方式

    XSS(Cross-Site Scripting,跨站脚本攻击)是一种代码注入攻击.攻击者在目标网站上注入恶意代码,当被攻击者登陆网站时就会执行这些恶意代码,这些脚本可以读取 cookie,sessi ...

  6. 物理机迁移至vmware

    使用用vmware vcenter converter standalone将物理机迁移到虚拟机. 6.2版本下载地址如下: https://www.filehorse.com/download-vm ...

  7. 在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理，对比Moment.js和day.js的处理

    Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js ...

  8. OpenTracing 简介

    自从 Google Dapper 的论文发布之后,各大互联网公司和开源社区开发的分布式链路追踪产品百花齐放,同时也给使用者带来了一个问题,各个分布式链路追踪产品的 API 并不兼容,如果用户在各个产品 ...

  9. 面试官：Redis中的缓冲区了解吗

    hello 大家好,我是七淅(xī). Redis 大家肯定不陌生,但在使用层面看不到的地方,就容易被忽略.今天想和大家分享的内容是 Redis 各个缓冲区的作用.溢出的后果及优化方向. 在开始正文前 ...

  10. Spring和MyBatis框架整合

    Spring集成MyBatis 使用MyBatis,需要创建MyBatis框架中的某些对象,使用这些对象,就能使用mybatis提供的功能了. 需要有Dao接口的代理对象,例如StudentDao接口 ...