CreateJs/Preloadjs moduleLoad encode images in manifest

Question

I have html5 creative build using create js which tries to load images from manfiest.Can we replace the image path with encoded image to build inline html

Existing code:

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);

I have tried replaceing test_logo.png with encode string data:image/png;base64,iVBORw0KGgoAAAANSUhE but getting error as XMLHttpRequest cannot load file Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Please suggest me any way to get through this.

Thanks.

Answer 1

May be the encoded string have error.

You can get image encode string by the following method.

Chrome & Opera:

1. Load the page that contains your image (loading the image directly won't work) and right-click on it. Select Inspect Element.

2. You'll see the console appear. Now click on the value of the src attribute.

3. The console will switch to the Resources tab and highlight the image. Right click on it and select Copy Image As Data URL.

For more idea: https://www.abeautifulsite.net/convert-an-image-to-a-data-uri-with-your-browser

Or Else you want to include permission in manifest

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

Answer 2

PreloadJS does not support encoded images, only image paths.

If you have the data, there is no requirement to preload it, so support was never considered. What is the use case for this? Why would you need to preload it if you already have the full data?

Answer 3

try to specify type when calling 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="..." />
});