CODEWITHSUNDEEP
javascripthtml
Obiii
Obiii

Reputation: 824

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?

Upvotes: 1

Views: 1124

Answers (2)

Obiii
Obiii

Reputation: 824

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");

Upvotes: 0

brijrajsinh
brijrajsinh

Reputation: 453

I hope this will help you this is exactly what you want this is not the best way but it is as per your requirement:

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'>

Upvotes: 1

Related Questions