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