0

我最近才在学习为 A-frame 项目编写代码。当尝试在 A-fram 中设置具有多个目标的场景时，本应由其中一个目标显示的 3D 模型不会出现。与标记一样，该模型使用 URL 作为原始 URL，但只有后者有效。

分离 ar.js 和 A-frame 证明问题显然出在 ar.js 上，但是，我可能弄错了。

您可以在此链接中找到我的代码，因为代码中的 URL 给我在这里发布太麻烦了。该文件的名称是“问题代码”：

https://github.com/BrandexGlobal/ARDuratex/tree/master

4

1 回答 1

1

在 HTML 中，您可以使用 base64 数据 uris 或 blob 将原始内容转换为可行的 url。这个 url应该在任何其他 url 可以工作的任何地方工作。我说应该是因为我不熟悉你正在使用的框架（我是反框架和支持香草的），所以你的框架可能会搞砸一些事情。


因为看起来你好像是 Stackoverflow 的新手，所以我将在这里解释这个复选标记。阅读并查看我的答案后，如果（且仅当）您对我在此处发布的答案完全满意，那么您可以通过单击此复选标记来奖励我以接受此答案作为最佳答案。如果其他人发布了更好的答案，请单击他们的复选标记。单击复选标记不是永久性的：如果稍后有人发布了更好的答案，那么您可以单击他们的复选标记并将最佳答案切换到发布的新答案。

普通图像示例：

(function(mainImage) {
    mainImage.title = mainImage.src;
})(document.getElementById("mainImage"));
<img src="https://i.stack.imgur.com/Lr5Kg.jpg" id="mainImage"/>

使用 base64 数据 URI 的示例（注意 url 如何是图像本身）。此外，请参阅Jpillora 的 base64 编码器和此演示页面。

(function(mainImage) {
    mainImage.title = mainImage.src;
})(document.getElementById("mainImage"));
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAgACADASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAABQYHCAT/xAAwEAABAwMBBQYFBQAAAAAAAAABAgMEBQYRAAcSEyExIkFRYYGRFSMyUpJCQ3Gxwf/EABcBAAMBAAAAAAAAAAAAAAAAAAEFBgT/xAAnEQABAwMCBQUBAAAAAAAAAAABAgMEAAURIcETFDFxgRJBUWGR0f/aAAwDAQACEQMRAD8Arm0G/Ztv1V6mUimImS0xEPArcCUpWtZAz/ATnHmNJlmVRFx14wbqjvVefwy86t5zeisjPIBv6MemlG5p7tQr1VkuOElya/knuCFlAHoEDQ6FVYASFxXHDNc+SXVIcAS31yMYBORjn46WQrhJekmO0jIJ8/vsM/VO7jaIzELmHVkEDxntkZ7ZqwXjCp9GgLdtxj4TUm+20uCCyhXiChHZPqDo7ZV5yJ7VNZrbYQ5Nb3o0lGNx0/accs94I5Hy6aiFz3/LQ1wGVr4RRub+/wCXjoxRZ7tI2OpqS3kuFK0TISRyLR4wXufmF9O7Ti+nkG2lA5JUAR85/lS1iDktxSVDQjSuDatCNr7QpbTzWKZU1mSyru7f1p/PPuNBZbLrMNC6dDjTkI/YcOCPMH/NaS2mWfHvK23IL7aS8k77Ln6m1eR1nCRaV32w8ph+lyZsYckLZQV8tTsuE407x2N9iDV3CuDMuPy75AIGNcYOOnUEZpQlRriuyayy5TRT22zucVbIZSBn3XqyxUpmzKTalLjrTGdIQsobwhLAOVnPTpn30t0eFX57m5FtyoIe6Bb4KAg+PMHVw2Z2tJocZ2TV18epSAAt1fUD7B4D+9BaJVzcb46AhtvoNdyc1icEW3BamletxXbbSv/Z" id="mainImage"/>

使用 Blob URI 的示例。注意 url 是如何动态生成的，类似于内存地址指针。

(function(){
    var rawData = atob("/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAgACADASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAABQYHCAT/xAAwEAABAwMBBQYFBQAAAAAAAAABAgMEBQYRAAcSEyExIkFRYYGRFSMyUpJCQ3Gxwf/EABcBAAMBAAAAAAAAAAAAAAAAAAEFBgT/xAAnEQABAwMCBQUBAAAAAAAAAAABAgMEAAURIcETFDFxgRJBUWGR0f/aAAwDAQACEQMRAD8Arm0G/Ztv1V6mUimImS0xEPArcCUpWtZAz/ATnHmNJlmVRFx14wbqjvVefwy86t5zeisjPIBv6MemlG5p7tQr1VkuOElya/knuCFlAHoEDQ6FVYASFxXHDNc+SXVIcAS31yMYBORjn46WQrhJekmO0jIJ8/vsM/VO7jaIzELmHVkEDxntkZ7ZqwXjCp9GgLdtxj4TUm+20uCCyhXiChHZPqDo7ZV5yJ7VNZrbYQ5Nb3o0lGNx0/accs94I5Hy6aiFz3/LQ1wGVr4RRub+/wCXjoxRZ7tI2OpqS3kuFK0TISRyLR4wXufmF9O7Ti+nkG2lA5JUAR85/lS1iDktxSVDQjSuDatCNr7QpbTzWKZU1mSyru7f1p/PPuNBZbLrMNC6dDjTkI/YcOCPMH/NaS2mWfHvK23IL7aS8k77Ln6m1eR1nCRaV32w8ph+lyZsYckLZQV8tTsuE407x2N9iDV3CuDMuPy75AIGNcYOOnUEZpQlRriuyayy5TRT22zucVbIZSBn3XqyxUpmzKTalLjrTGdIQsobwhLAOVnPTpn30t0eFX57m5FtyoIe6Bb4KAg+PMHVw2Z2tJocZ2TV18epSAAt1fUD7B4D+9BaJVzcb46AhtvoNdyc1icEW3BamletxXbbSv/Z");
    var rawDataLength = rawData.length;
    var typedArrayView = new Uint8Array(rawDataLength);
    for (var i=0; i<rawDataLength; i=i+1|0)
        typedArrayView[i] = rawData.charCodeAt(i);
    var img = document.body.appendChild(document.createElement("img"));
    img.src = img.title = URL.createObjectURL(new Blob([
        typedArrayView
    ], {type: "image/jpeg"}));
})();

另一个例子是我们可以将图像编码为 Base64 数据 URI，然后使用 XMLHttpRequest 来 HTTP 获取数据 URI 的内容，但是将returnTypeXMLHttpRequest 的属性设置为 Blob，以便我们从 base64 数据 URI 中获取一个 blob。

(function(){
    var xhr = new XMLHttpRequest;
    xhr.responseType = "blob";
    xhr.open("GET", document.getElementById("base64DataURIImage").src);
    xhr.onload = function(){
       var img=document.body.appendChild(document.createElement("img"));
       img.src = img.title = URL.createObjectURL(xhr.response);
    }
    xhr.send();
})();
(function(mainImage) {
    mainImage.title = mainImage.src;
})(document.getElementById("base64DataURIImage"));
As a base64 URI: <img id="base64DataURIImage" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAgACADASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAABQYHCAT/xAAwEAABAwMBBQYFBQAAAAAAAAABAgMEBQYRAAcSEyExIkFRYYGRFSMyUpJCQ3Gxwf/EABcBAAMBAAAAAAAAAAAAAAAAAAEFBgT/xAAnEQABAwMCBQUBAAAAAAAAAAABAgMEAAURIcETFDFxgRJBUWGR0f/aAAwDAQACEQMRAD8Arm0G/Ztv1V6mUimImS0xEPArcCUpWtZAz/ATnHmNJlmVRFx14wbqjvVefwy86t5zeisjPIBv6MemlG5p7tQr1VkuOElya/knuCFlAHoEDQ6FVYASFxXHDNc+SXVIcAS31yMYBORjn46WQrhJekmO0jIJ8/vsM/VO7jaIzELmHVkEDxntkZ7ZqwXjCp9GgLdtxj4TUm+20uCCyhXiChHZPqDo7ZV5yJ7VNZrbYQ5Nb3o0lGNx0/accs94I5Hy6aiFz3/LQ1wGVr4RRub+/wCXjoxRZ7tI2OpqS3kuFK0TISRyLR4wXufmF9O7Ti+nkG2lA5JUAR85/lS1iDktxSVDQjSuDatCNr7QpbTzWKZU1mSyru7f1p/PPuNBZbLrMNC6dDjTkI/YcOCPMH/NaS2mWfHvK23IL7aS8k77Ln6m1eR1nCRaV32w8ph+lyZsYckLZQV8tTsuE407x2N9iDV3CuDMuPy75AIGNcYOOnUEZpQlRriuyayy5TRT22zucVbIZSBn3XqyxUpmzKTalLjrTGdIQsobwhLAOVnPTpn30t0eFX57m5FtyoIe6Bb4KAg+PMHVw2Z2tJocZ2TV18epSAAt1fUD7B4D+9BaJVzcb46AhtvoNdyc1icEW3BamletxXbbSv/Z" />
<br /><br />
Then turned into a blob:

资源：

对于 base64 数据 URI，请参阅此 MDN 页面

对于我自己的用于正确编码具有高 unicode 字符的 base64 URI 的库，请参阅此 Github 存储库

对于 blob，请参阅此 MDN 页面

于 2019-04-25T21:07:39.220 回答