Question

我在.js文件中有这个代码，允许我流式传输图像：

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

然后我将它显示在html中的矩形中，如下所示：

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

我遇到的问题是我需要在画布的背景中显示流，所以我可以捕捉鼠标/触摸输入以进行我需要的其他工作。

我已经尝试过切换顺序（画布先然后是图像）但是我得到的只是一个大空白屏幕。

Answer 1

给孩子的父亲相对位置和绝对位置然后画布将覆盖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>

Answer 2

我会把img放在画布里面。将宽度和高度设置为100％，以便占用画布中的所有空间，然后将其设置为固定，并将其z-index设置为-1，使其保持在流量之外，并且在后台。这是css代码：

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

别忘了把img放在画布上。

Answer 3

如何使用css将其作为背景图像

<div id="main">

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

很抱歉格式化我的移动设备，但您可能会有所了解

如何将JS ID作为网站的背景页面？

3 个答案: