CreateJs / Preloadjs moduleLoad对manifest中的图像进行编码

Question

我使用创建js的html5广告素材构建尝试从manfiest加载图片。我们可以用编码图像替换图像路径来构建内联html

现有代码：

.myDiv {
    background-image: url("myBiggerImage.jpg");
    background-position: -51px -798px;
    background-repeat: no-repeat;
    background-size: auto auto;
}

我尝试用编码字符串manifest: [ {src:"images/test_logo.png", id:"test_logo"}, {src:"images/tg.png", id:"tg"}, {src:"images/tq_logo.png", id:"tq_logo"}, {src:"images/tq_1.png", id:"tq_1"}, {src:"images/tq2_2.png", id:"tq2_2"} ] loader.loadManifest(lib.properties.manifest); 替换test_logo.png，但收到错误 XMLHttpRequest无法加载文件 交叉源请求仅支持协议方案：http，数据，chrome，chrome-extension，https，chrome-extension-resource。

请建议我以任何方式解决这个问题。

感谢。

Answer 1

可能是编码的字符串有错误。

您可以通过以下方法获取图像编码字符串。

Chrome＆amp;歌剧：

1. 加载包含图片的页面（直接加载图片，然后右键单击它）。选择Inspect Element。



1. 您将看到控制台出现。现在单击src属性的值。



1. 控制台将切换到“资源”选项卡并突出显示图像。右键单击它并选择“将图像复制为数据URL”。



更多想法：https://www.abeautifulsite.net/convert-an-image-to-a-data-uri-with-your-browser

或者您希望在清单中包含权限

https://developer.chrome.com/extensions/declare_permissions

Answer 2

PreloadJS不支持编码图像，仅支持图像路径。

如果您有数据，则无需预加载数据，因此从未考虑过支持。这有什么用例？如果您已经拥有完整数据，为什么还需要预加载？

Answer 3

在调用loadFile

时尝试指定类型

var queue = new createjs.LoadQueue();
queue.loadFile({
  id: 'imgId',
  src: 'data:image/...' // base64 image url
  type: createjs.Types.IMAGE
});

queue.on('complete', function () {
  console.log(queue.getResult('imgId')) // <img src="..." />
});