CSS canvas 捕捉视频video元素截图

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

上一篇:P3275 [SCOI2011]糖果


下一篇:备份LeetCode OJ自己编写的代码