5、video和canvas

一、video

Video 是 HTML5 中新增的标签，使用 Video 标签可以播放 ogg、mp4
、webm 等格式的视频，Video 标签的引入，减少前端页面对 Flash 动画的依赖。

1.1 video内部标签：<source> 在video中嵌入视频

(1) 不使用<source>：

当页面载入时，会引用 movie.mp4 文件，如果浏览器无法支持 HTML5，则会提示 Video 中的内容。

    <video src="/movie.mp4" controls="controls">
        你就用这个浏览器有出息吗？
    </video>

(2) 使用<source>：

为适应不同的浏览器，我们也需要准备多种不同的格式的视频，并使用 video 引用它们：

    <video controls="controls">
        <source src="/movie.mp4" type="video/mp4">
        <source src="/movie.ogg" type="video/ogg">
        你就用这个浏览器有出息吗？
    <video>

1.2 video的属性

src、poster、preload、autoplay、loop、controls、width、height等

（1）autoplay属性 ：让浏览器加载完视频文件后立即播放。

用于设置视频是否自动播放，是一个布尔属性。true，表示自动播放。

<video src="hangge.mp4" autoplay></video>

（2）muted属性：自动播放时会静音

如果启用自动播放，可以将播放器设置为muted状态。这样自动播放时会静音，防止用户厌烦。用户需要的话可以点击播放器扬声器图标重新打开声音。

<video src="hangge.mp4" controls autoplay muted></video>

（3）controls属性：告诉浏览器要有基本播放控件

<video src="hangge.mp4" controls></video>

 （4）通过width和height设置视频窗口大小

<video src="hangge.mp4" controls width="400" height="300"></video>

更多属性介绍参考：https://blog.csdn.net/lileihappy/article/details/79904206

1.3 navigator.MediaDevices.getUserMedia()：请求使用摄像头、麦克风

提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。

它返回一个 Promise 对象，成功后会resolve回调一个 MediaStream 对象。若用户拒绝了使用权限，或者需要的媒体源不可用，promise会reject回调一个 PermissionDeniedError 或者 NotFoundError 。

（1）MediaDevices.getUserMedia()的基本语法：

navigator.mediaDevices.getUserMedia(constraints)
//constraints配置信息，见下文
.then(function(stream) { 
  /* 成功，同意使用。使用这个stream stream */
})
.catch(function(err) {
  /* 失败，拒绝使用。 处理error */
});

（2）constraints参数：指定了请求的媒体类型和相对应的参数。

constraints 参数是一个包含video 和 audio两个成员的MediaStreamConstraints 对象，用于说明请求的媒体类型。必须至少一个类型或者两个同时可以被指定。如果浏览器无法找到指定的媒体类型或者无法满足相对应的参数要求，那么返回的Promise对象就会处于rejected［失败］状态，NotFoundError作为rejected［失败］回调的参数。

1. 以下同时请求不带任何参数的音频和视频：

{ audio: true, video: true }

如果为某种媒体类型设置了 true ，得到的结果的流中就需要有此种类型的轨道。如果其中一个由于某种原因无法获得，getUserMedia() 将会产生一个错误。 

2. 请求使用1280x720的摄像头分辨率：

{
  audio: true,
  video: { width: 1280, height: 720 }
}

当由于隐私保护的原因，无法访问用户的摄像头和麦克风信息时，应用可以使用额外的constraints参数请求它所需要或者想要的摄像头和麦克风能力。浏览器会试着满足这个值，有可能返回其它的分辨率。

3.  获取最低为1280x720的分辨率。

{
  audio: true,
  video: {
    width: { min: 1280 },
    height: { min: 720 }
  }
}

不支持尺寸时：如果摄像头不支持请求的或者更高的分辨率，返回的Promise会处于rejected状态，NotFoundError作为rejected回调的参数，而且用户将不会得到要求授权的提示。

4. 给定理想值ideal 和 范围 

{
  audio: true,
  video: {
    width: { min: 1024, ideal: 1280, max: 1920 },
    height: { min: 776, ideal: 720, max: 1080 }
  }
}

 匹配最佳摄像头或理想值：当请求包含一个ideal（应用最理想的）值时，这个值有着更高的权重，意味着浏览器会先尝试找到最接近指定的理想值的设定或者摄像头（如果设备拥有不止一个摄像头）。

5. 强制使用前置摄像头（如果有的话）：

{ audio: true, video: { facingMode: "user" } }

6. 强制使用后置摄像头 ：

{ audio: true, video: { facingMode: { exact: "environment" } } }

（3）返回值

返回一个 Promise ：

• 成功后的回调函数带一个 MediaStream 对象作为其参数（媒体内容的流）。
• 失败后的回调函数参数为 PermissionDeniedError 或者 NotFoundError 。

具体参考：https://blog.csdn.net/qq_41247335/article/details/104521237

（4）完整示例

这个例子设置了摄像头分辨率，并把结果的 MediaStream 分配给了一个video元素。

// 想要获取一个最接近 1280x720 的相机分辨率
var constraints = { audio: true, video: { width: 1280, height: 720 } }; 

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
  var video = document.querySelector('video');
  video.srcObject = mediaStream;
  video.onloadedmetadata = function(e) {
    video.play();
  };
})
.catch(function(err) { console.log(err.name + ": " + err.message); }); // 总是在最后检查错误

（5）补充：

• 当指定视频的元数据已经加载时，会触发 loadedmetadata 事件；
• videoObject. play()方法用于开始播放当前视频；

1.4 window.URL.createObjectURL(file对象)

 将视频流对象解析为URL, 可以用于在浏览器上预览本地图片或者视频

 1.5 MediaRecorder类：用于录制音频和视频

为了增加对录制音视频的支持，Android系统提供了一个MediaRecorder的类(基于文件录音)

MediaRecorder recorder=newMediaRecorder();

可参考：https://blog.csdn.net/fengyuzhengfan/article/details/38561111

1.6 dataavailable事件： 每当异步传输数据的数据源对象的数据到达时触发。 

常用事件可参考：https://blog.csdn.net/KevinwuwenboA/article/details/79950485

二、canvas 画布

• canvas是HTML5中新增的标签，用于绘制图形。
• 实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚本来控制该对象进行绘图。
• 只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。

2.1 基本语法

<canvas></canvas>

1. 使用 canvas 标签, 即可在页面中开辟一格区域. 可以设置其 width 和 height 设置该区域的尺寸.
2. 默认 canvas 的宽高为 300 和 150.
3. 不要使用 CSS 的方式设置宽高, 应该使用 HTML 属性.
4. canvas 本身不能绘图，是使用 JavaScript 来完成绘图， canvas 对象提供了各种绘图用的 api.
5. canvas 的兼容性非常强, 只要支持该标签的, 基本功能都一样, 因此不用考虑兼容性问题.

2.2 基本的绘图方法

绘图步骤：

1. 获得 canvas 对象；.
2. 调用 canvas 对象的getContext 方法, 提供字符串参数 ‘2d’.
3. 该方法返回 CanvasRenderingContext2D 类型的对象. 该对象提供基本的绘图命令.
4. 使用 CanvasRenderingContext2D 对象提供的方法进行绘图.
5. 基本绘图命令

• - 设置开始绘图的位置: context.moveTo( x, y ).
• - 设置直线到的位置: context.lineTo( x, y ).
• - 描边绘制: context.stroke().
• - 填充绘制: context.fill().
• - 闭合路径: context.closePath().

例1：绘制基本线

   var canvas = document.createElement( 'canvas' );
    canvas.width = 500;
    canvas.height = 400;
    canvas.style.border = '1px dashed red';
    document.body.appendChild( canvas );
    // 获得 CanvasRenderingContext2D 对象
    var context = canvas.getContext( '2d' );
    // 设置 起点
    context.moveTo( 0, 0 );
    // 绘制直线
    context.lineTo( 500, 400 );
    // 设置 起点
    context.moveTo( 0, 400 );
    // 绘制直线
    context.lineTo( 500, 0 );
    // 描边显示效果
    context.stroke();

结果：

更多参考：

https://blog.csdn.net/u014607184/article/details/51746384

https://blog.csdn.net/ff906317011/article/details/80415137

2.3 方法补充：toDataURL

（1）toDataURL()

是canvas对象的一种方法，用于将canvas对象转换为base64位编码；

toDataURL()方法的两个参数：toDataURL(type, encoderOptions)

• type：指定转换为base64编码后图片的格式，如：image/png、image/jpeg、image/webp等等，默认为image/png格式；
• encoderOptions：用于设置转换为base64编码后图片的质量，取值范围为0-1，超出取值范围用默认值0.92代替；

例如：将获取的canvas对象转化为base64后为

 

 三、html2canvas

• html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏，这个html2canvas脚本将当页面渲染成一个Canvas图片。
• 它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。
• html2canvas可以通过获取HTML的某个元素，然后生成Canvas，能让用户保存为图片

(1) 可以使用两种语法格式进行截图：

• 通过在 html2canvas(需要截图的元素). then( function(){} ) 的方式向body中 append canvas 图形。

html2canvas(document.getElementById('id'))
.then(function(canvas) {document.body.appendChild(canvas);});

•  通过 html2canvas( 需要截图的元素，{属性：属性值} ). then( function(){} ) 的方式。

html2canvas(document.getElementById("target"), {
  allowTaint: true, //允许污染
  taintTest: true, //在渲染前测试图片(没整明白有啥用)
  useCORS: true, //使用跨域(当allowTaint为true时这段代码没什么用)
  background: "#fff",
  onrendered: function (canvas) {
    imgBlob = canvas.toDataURL('image/jpeg', 1.0); //将图片转为base64, 0-1 表示清晰度
    imgBlob = imgBlob.toString().substring(imgBlob.indexOf(",") + 1);//截取base64以便上传
  }
}).then(function (canvas) {
            context.mozImageSmoothingEnabled = false;
            context.webkitImageSmoothingEnabled = false;
            context.msImageSmoothingEnabled = false;
            context.imageSmoothingEnabled = false;
            var dataUrl = canvas.toDataURL('image/jpeg', 1.0);
            var newImg = document.createElement("img");
            newImg.src =  dataUrl;
            newImg.width = width;
            newImg.height= height;
            $("body")[0].appendChild(newImg);
    });

四、FormData方法 

FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。

4.1 创建formData对象实例

（1）方式一：创建一个空对象实例

var formData = new FormData();

（2）方式二：使用已有的表单来初始化一个对象实例

假如现在页面已经有一个表单

<form id="myForm" action="" method="post">
    <input type="text" name="name">名字
    <input type="password" name="psw">密码
    <input type="submit" value="提交">
</form>

我们可以使用这个表单元素作为初始化参数，来实例化一个formData对象

// 获取页面已有的一个form表单
var form = document.getElementById("myForm");
// 用表单来初始化
var formData = new FormData(form);
// 我们可以根据name来访问表单中的字段
var name = formData.get("name"); // 获取名字
var psw = formData.get("psw"); // 获取密码
// 当然也可以在此基础上，添加其他数据
formData.append("token","kshdfiwi3rh");

4.2 方法 

首先，我们要明确formData里面存储的数据形式，一对key/value组成一条数据，key是唯一的，一个key可能对应多个value。如果是使用表单初始化，每一个表单字段对应一条数据，它们的HTML name属性即为key值，它们value属性对应value值。

（1） get() 获取值

我们可以通过get(key)/getAll(key)来获取对应的value，

formData.get("name"); // 获取key为name的第一个值
formData.get("name"); // 返回一个数组，获取key为name的所有值

 （2）append(key, value) 添加数据

我们可以通过append(key, value)来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
 
formData.get("k1"); // "v1"
formData.getAll("k1"); // ["v1","v2","v1"]

（3）set(key, value) 设置修改数据 

我们可以通过set(key, value)来设置修改数据，如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值。

formData.append("k1", "v1");
formData.set("k1", "1");
formData.getAll("k1"); // ["1"]

（4）has(key)来判断是否有对应的key值

formData.append("k1", "v1");
formData.append("k2",null);
 
formData.has("k1"); // true
formData.has("k2"); // true
formData.has("k3"); // false

（5）delete(key) 删除数据

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.delete("k1");
 
formData.getAll("k1"); // []

更多参考：https://blog.csdn.net/AlbenXie/article/details/100103709