獲得從IMG標記幀與URL源在Javascript

Question

我有一個img標籤在我的HTML

<img width="600px" height ="400px" id='the_img_1' src='http://127.0.0.1:5000/video_feed'> 

IMG元素是從本地URL顯示視頻。

我想從javascript中的這個img標籤中獲取視頻的幀（或圖像中的jpg格式）。這可能嗎？

Answer 1

使用畫布。在畫布上 1.繪製img標籤內容2.從帆布獲得DataUri（base64編碼字符串）

var img = document.getElementById("the_img_1"); 
var canvas = document.getElementById('myCanvas') // reference to canvas element 
var ctx = canvas.getContext('2d'); // get the canvas context; 
ctx.drawImage(img, 0, 0, 640,480); //draw image into canvas; 
encodedImg = canvas.toDataURL("image/png"); 

Answer 2

我希望這會幫助你，這是你想要什麼，這是不是最好的方式，但它是作爲按您的要求：

var imgTags = document.getElementsByTagName('img'); 
 
for(i=0; i<imgTags.length; i++){ 
 
    var iframurl = imgTags[i].getAttribute("src"); 
 
    var iframe = document.createElement('iframe'); 
 
    iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(iframurl); 
 
    document.body.appendChild(iframe); 
 
}

<img width="600px" height ="400px" id='the_img_1' src='http://127.0.0.1:5000/video_feed'>