来一个简单粗暴的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. mataplotlib篇（开篇）

    今日内容概要 matplotlib画各种图形 数据操作补充 数据清洗 网络爬虫 今日内容详细 matplotlib画各种图形 # 首先导入模块 import numpy as np import pa ...

  2. 安装CentOS时，推荐的分区方案

    最佳分区设置取决于 Linux 系统的用途.

  3. 为游戏编写boss剧情

    教程目录: 1. 小游戏展示 2. 下载游戏引擎 3. 创作一个移动的背景 4. 让阿菌煽动翅膀 5. 让阿菌模拟重力下坠 6. 让阿菌可以摸鱼 7. 编写游戏开始与结束 8. 编写 boss 剧情 ...

  4. SpringBoot连接Redis （Sentinel模式&Cluster模式）

    一.引入pom <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  5. 从ELF文件谈起

    本文信息来源: 又是一期硬核内容:ELF文件格式 What's the difference of section and segment in ELF file format ELF Section ...

  6. C/C++语言读取SEGY文件笔记（一）

    SEGY IO 推荐采用的IDE为Visual studio(VS),本文档将介绍SEGY文件的读取与写入过程,即SEGY文件的复制. 因此,新建头文件ReadSeismic.h与C++文件ReadS ...

  7. 软件工程homework-002

    博客信息 沈阳航空航天大学计算机学院2020软件工程作业 作业要求 https://edu.cnblogs.com/campus/sau/Computer1701-1705/homework/1058 ...

  8. Go值类型和引用类型+作用域+空白标识符+常量

    值类型和引用类型 所有像 int.float.bool 和 string 这些基本类型都属于值类型,使用这些类型的变量直接指向存在内存中的值: 当使用等号 = 将一个变量的值赋值给另一个变量时,如:j ...

  9. Redis(一)：基本数据类型与底层存储结构

    最近在整理有关redis的相关知识,对于redis的基本数据类型以及其底层的存储结构简要的进行汇总和备注(主要为面试用) Redis对外提供的基本数据类型主要为五类,分别是 STRING:可以存储字符 ...

  10. huawei 华为 ubuntu mysql 访问不了的原因

    标签:服务器   ins   查看   tar   安全组   service 一. 首先将3306端口添加至安全组, 确保端口没有被封掉 二. 开启服务器上的mysql 权限, 步骤如下 1.mys ...