使用 Javascript 中的 url 源从 Img 标记获取框架答案

【问题标题】：Get frame from Img tag with a url source in Javascript使用 Javascript 中的 url 源从 Img 标记获取框架
【发布时间】：2017-12-21 17:25:33
【问题描述】：

我的 html 中有一个 img 标签

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

Img 元素正在显示来自本地 url 的视频。

我想从 javascript 中的这个 img 标签获取视频的帧（或 jpg 形式的图像）。这可能吗？

【问题讨论】：

你会喜欢这样的（花点时间演示）stackoverflow.com/a/19176124/4921471
@ÁlvaroTouzón 抱歉，我的 html 中没有
是的，但是为了您的道具，您需要使用视频标签来捕获任何帧
@ÁlvaroTouzón 如果我使用视频标签，页面上不会显示任何内容
嗯，看看你有没有预加载图片？

标签： javascript html

【解决方案1】：

使用画布。 1.在画布上绘制img标签内容 2.从canvas中获取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");

【讨论】：

【解决方案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);
}

&lt;img width="600px" height ="400px" id='the_img_1' src='http://127.0.0.1:5000/video_feed'&gt;

【讨论】：