1

I have this code in the .js file that allows me to stream an image:

//Image streamaing!
function onMessage2(evt) {
  $("#image").attr('src',  'data:image/jpg;base64,'+evt.data);
}

I then display it in a rectangle in html like so:

<div class="row" style="margin-left:0px; margin-right:0px">
 <img id="image" src=""> 
 <canvas id="canvas"></canvas> 
</div>

The problem I have is that I need the stream to be displayed in the background of the canvas, so I can catch mouse/touch input for some other work I need.

I've tried switching the order (canvas first then image) but then all I get is a big blank screen.

BenMorel
  • 34,448
  • 50
  • 182
  • 322
newguy
  • 69
  • 1
  • 9
  • 1
    please look here how to draw an image to a canvas: http://stackoverflow.com/questions/4773966/drawing-an-image-from-a-data-url-to-a-canvas – Marc Jul 07 '16 at 11:10

3 Answers3

1

Give the parent relative position and absolute position for the childs then canvas will overlay the img :

.row{position: relative;}
.row img, .row canvas{position:absolute; top:0; left:0;}

<div class="row" style="margin-left:0px; margin-right:0px">
 <img id="image" src=""> 
 <canvas id="canvas"></canvas> 
</div>
Ashkan Mobayen Khiabani
  • 33,575
  • 33
  • 102
  • 171
1

I would put the img inside the canvas. Set the width and height to 100% so it takes up all the space in the canvas and then set it's position to fixed and it's z-index to -1 so it stays out of the flow and is in the background. Here's the css code:

#image {
position:fixed;
z-index:-1;
width:100%;
height:100%;
}

And don't forget to put the img in the canvas.

StudioTime
  • 22,603
  • 38
  • 120
  • 207
Mehmet Efe Akça
  • 1,132
  • 10
  • 9
0

What about making it as background image using css

<div id="main">


$("#main").css("background- image",  "url(url of image)");

Sorry for formatting i'm writing from my mobile but you might get idea

Mohamed Abdelrahman
  • 81
  • 2
  • 11