blob - 如何使用 blob 或 dataURL 作为 360 度照片的帧或天空的 src

Question

我正在编写一个简单的脚本来在 VR 中显示 360 度图像，同时动态更改图像。 目前，下一个图像源由一个简单的超时设置(在 4 个本地 .jpg 中)，但我计划从远程摄像机获取图像，然后每 x 秒更新一次天空 View 。

我能够更改 a-sky src 属性并设置不同的 n.jpg。 但是我无法将 blob 设置为源。

现在我只是将本地 jpg 转换为 blob，但下一步是要求远程相机 api 拥有 jpg 二进制文件，并将其转换为 blob url。 无论如何，新图像不会显示。 它似乎仅在您将静态内容作为 src 时才有效。

我该怎么办？ 谢谢

部分来源:

      setInterval(updatePanImg, 2000);
      var seq = 1;
      function updatePanImg() {

          let blob_src;
          if (seq >= 4) seq = 1; else seq++;
          blob_src = seq + ".jpg";
          console.log('blob_src update ' + blob_src);

          //1-working (/imgname.jpg)
          //document.getElementById('asky').setAttribute("material", "src", blob_src);

          //2-not working (/blob:......)
          return fetch(blob_src)
              .then((response)=> {
                return response.blob();
              })
              .then(blob => {
                  let blob_src_url = URL.createObjectURL(blob);
                  document.getElementById('asky').setAttribute("material", "src", blob_src_url);
                return blob_src_url;
              });
        }


<script src="aframe-master.min.js"></script>
<a-scene>
  <a-sky id="asky" material="opacity:1; src: 4.jpg" rotation="0 -130 0" foo></a-sky>
</a-scene>

Answer 1

尝试将其包装在 url() 中，也许吧？只要 blob 以类似数据开头

document.getElementById('asky').setAttribute("material", "src", `url(data:image/png;base64,${blob_src_url})`);

添加 data:image/png;base64, 或任何格式(如果尚不存在)。