Jquery图片显示在第一个IMG标签中

SjoerdWalravens • 6 年前 • 1694 次点击

为了学校练习,我收到了老师发来的用相机拍照的代码。唯一的问题是当 captureImage 函数正在运行,它将图片保存在HTML代码的第一个IMG标记中。

但是,它的目的是将此图片保存在DIV中 #fotosToevoeg 我试着用append属性为图片创建一个新的div。目前我找不到代码将图片保存到第一个IMG标记的实际位置。

这是图片应该保存在新DIV中的地方

</div>
<div class="locatieInfo marginForNav" id="fotosToevoeg">
</div>

这是现在捕获图片的jQuery代码

function captureImage() {
  navigator.mediaDevices.getUserMedia({
      video: true
    })
    .then(function(stream) {
      var mediaStreamTrack = stream.getVideoTracks()[0];
      var imageCapture = new ImageCapture(mediaStreamTrack);
      var img = document.querySelector('img');
      imageCapture.takePhoto()
        .then(blob => {
          img.src = URL.createObjectURL(blob);
          img.onload = () => {
            URL.revokeObjectURL(this.src);
          }
        })
        .catch(error => console.error('takePhoto() error:', error));

      stopStreaming();
    });
}

我希望这里有人能帮我解决这个问题!

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/51323

文章 [ 2 ] | 最新文章 6 年前

• 1 楼

Mohammad Taghizad Badrian 6 年前

您想要添加新的DIV和新的img,或者想要将新的img附加到该DIV 要向该Div添加新的img,可以将代码更改为

function captureImage() {
        navigator.mediaDevices.getUserMedia({
                 video: true
            })
.then(function(stream) {
  var mediaStreamTrack = stream.getVideoTracks()[0];
  var imageCapture = new ImageCapture(mediaStreamTrack);
  var img = document.createElement("img")
  imageCapture.takePhoto()
    .then(blob => {
      img.src = URL.createObjectURL(blob);
      img.onload = () => {
        URL.revokeObjectURL(this.src);
      }
      document.getElementByID("fotosToevoeg").appendChild(img)
    })
    .catch(error => console.error('takePhoto() error:', error));

  stopStreaming();
});

}

• 2 楼

freedomn-m 6 年前

目前我找不到代码将图片保存到第一个IMG标记的实际位置。

它保存在这里: document.querySelector('img') 这是第一个img标签。

您可以将该行更改为:

var img = $("<img>").appendTo("#fotosToevoeg")[0];

(标记为jquery)将:

$("<img>") 创建新的图像标记
.appendTo() 将其添加到具有该ID的标记中
[0] 将新的img标记作为新附加的HTML节点返回,这样代码的其余部分就可以正常工作了

登录后回复