video元素介绍:
http://www.runoob.com/html/html5-video.html
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video
video元素dom-webapi(属性、方法、事件)
http://www.runoob.com/tags/ref-av-dom.html
canvas dom-webapi
http://www.w3school.com.cn/jsref/dom_obj_canvas.asp
视频捕捉截图:
// 添加一个video元素
(function(window){
let video=document.createElement("video");
video.src = "/storage/emulated/0/UZMap/A6097221144053/aliyunvod/1553142977717.mp4";
// video.autoplay = true;
video.id = "video";
video.currentTime = 1;
document.body.appendChild(video); })(); // 绘制canvas画布、获取data
function getData(){
let v = document.getElementById("video");
let canvas=document.createElement("canvas");
let ctx = canvas.getContext("2d");
ctx.drawImage(v, 0, 0, 270, 135);
// document.body.appendChild(canvas);
console.log(canvas.toDataURL());
}
TIPS:
在获取dataURL 时,如果为移动端有可能出现以下问题:
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may
原因:由于浏览器的安全考虑,如果在使用canvas绘图的过程中,使用到了外域的图片资源,那么在toDataURL()时会抛出安全异常。
解决方案1.
如果想使用toDataURL()生成图片文件的话,在canvas绘图过程中使用的图片应该是当前域下的。
解决方案2.
访问的服务器允许,资源跨域使用,也就是说设置了CORS跨域配置,Access-Control-Allow-Origin。
个人使用的是第一种方法:使用当前域下的资源,访问native 资源即可。
参考地址:https://blog.csdn.net/u013040887/article/details/78986598