来一个简单粗暴的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. cmd:WIN7操作系统下cmd窗口下的复制粘贴

    1.右击cmd的顶部栏,点开属性 2.在 选项 下,勾选"快速编辑模式" 3.按住鼠标左键标注需要复制的区域 再点击一下右键,则上文的标记区域就已经被复制了,可以通过ctrl+v进 ...

  2. matplotlib(终章）

    今日内容概要 matplotlib实际案例演示 各种图形的总结 数据清洗(简单) 数据清洗的案例 今日内容详细 matplotlib实际案例演示 # 2.绘制每年电影上映数量曲线图 首先载入模块 im ...

  3. 微信小程序实现图表展示

    开发可参考以下链接 点击有道云链接 小程序柱状图展示 [单元目标] 掌握小程序柱状图展示 [教学内容] 1.1 掌握组件导入 在miniprogram下的utils文件夹(若没有就新建一个)下,新建w ...

  4. laravel7 路由引入，避免上线路由不统一

    1:新建 目录admin,新建文件夹route.php 2:将需要的路由写在route.php中即可. 3:在web.php  引入即可 include base_path('routes/admin ...

  5. 微信请求tp5框架数据 及渲染数据至页面

    tp模型数据: namespace app\xcx\model; use think\Model; class XcxModel extends Model { //链接数据库表名 protected ...

  6. 浅析XML

    概述XML文档结构 每个XML文档都分为两部分:序言(Prolog)和文档元素(或文档节点) 例子:写一段XML然后简单分析一下 <?xml version="1.0" en ...

  7. 【Azure Developer - 密钥保管库 】使用 Python Azure SDK 实现从 Azure Key Vault Certificate 中下载证书(PEM文件)

    问题描述 在Azure Key Vault中,我们可以从Azure门户中下载证书PEM文件到本地. 可以通过OpenSSL把PFX文件转换到PEM文件.然后用TXT方式查看内容,操作步骤如下图: Op ...

  8. 如何防止 IP 被盗用 保护网络正常运行

    IP被盗用是指盗用者使用未经授权的IP来配置网上的计算机.目前IP盗用行为非常常见,许多"不法之徒"用盗用地址的行为来逃避追踪.隐藏自己的身份.IP的盗用行为侵害了网络正常用户的权 ...

  9. JavaWeb——服务器

    作用:服务器是一种被动的操作,用来处理用户的一些请求和给用户的一些响应 相关软件:tomcat Tomcat是Apache 软件基金会(Apache Software Foundation)的Jaka ...

  10. MATLAB奔溃仅左上角显示关闭界面X

    一  问题描述 今天在MATLAB调试图像增强程序时,忽然间点了MATLAB向下还原,奇怪的一幕发生了,电脑左上角仅显示关闭图标X.我就搜了MATLAB中文论坛(https://www.ilovema ...