Get frame from Img tag with a url source in Javascript
I have a img tag in my html
<img width="600px" height ="400px" id='the_img_1' src='http://127.0.0.1:5000/video_feed'>
Img element is displaying the video from a local url.
I want to get a frame(or image in jpg form) of video from this img tag in javascript. Is this possible?
我希望这会帮助你，这正是你想要的，这不是最好的方式，但它是按照你的要求：
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'>Use canvas. 1. Draw img tag contents on canvas 2. get DataUri from canvas (encoded base64 string)
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");
上一篇: HTTP请求方法的有效载荷