来一个简单粗暴的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下C工具应用

    所有实验文件可见github 计算机系统实验整理 实验报告 实 验(一) 题 目 Linux下C工具应用 专 业 计算机学院 学 号 班 级 学 生 指 导 教 师 实 验 地 点 实 验 日 期 计 ...

  2. JZ-056-删除链表中重复的结点

    删除链表中重复的结点 题目描述 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1->2->3->3->4-> ...

  3. Vue基础语法-数据绑定、事件处理和扩展组件等知识详解（案例分析，简单易懂，附源码）

    前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...

  4. BBS项目（一）

    目录 BBS项目(一) 项目开发流程 BBS项目 BBS表分析 自关联 表关系图示 BBS项目(一) 项目开发流程 项目分类 针对互联网用户:抖音,淘宝····· 针对公司内部:后台管理系统··· 针 ...

  5. linux作业--第一周

    1.按系列罗列Linux的发行版,并描述不同发行版之间的联系与区别. 目前三大主流发行版分别为Debian.Redhat.SUSE. redhat: RHEL: Red Hat公司发布的面向企业用户的 ...

  6. MM32F0140 UART1空闲中断接收

    目录: 1.MM32F0140简介 2.初始化MM32F0140 UART1空闲中断和NVIC中断 3.编写MM32F0140 UART1中断接收和空闲中断函数 4.编写MM32F0140 UART1 ...

  7. [Java编程思想] 第二章 一切都是对象

    第二章 一切都是对象 2.1 用引用操纵对象   创建一个String引用: String s;   这里所创建的只是引用,并不是对象.   创建一个引用的同时便初始化: String s = &qu ...

  8. spinlock 设计的初衷，当只有单核时是否还需要锁

    自旋锁,的设计初衷是什么,是为了解决什么问题.如果只有一个cpu,并且是单核,那是否还需要用到自旋锁.

  9. 写fstable

    mountpoint 就是挂载点./. /usr. swap 都是系统安装时分区的默认挂载点. 如果你要挂载一个新设备,你就要好好想想了,因为这个新设备将作为文件系统永久的一部分,需要根据FSSTND ...

  10. 关于“TypeError: Assignment to constant variable”的问题解决方案

    在项目开发过程中,在使用变量声明时,如果不注意,可能会造成类型错误比如: Uncaught (in promise) TypeError: Assignment to constant variabl ...