CODEWITHSUNDEEP
javascriptcreatejspreloadjs
user3061659
user3061659

Reputation: 11

CreateJs/Preloadjs moduleLoad encode images in manifest

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.

Upvotes: 0

Views: 753

Answers (3)

Littlee
Littlee

Reputation: 4327

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="..." />
});

Upvotes: 0

Lanny
Lanny

Reputation: 11294

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?

Upvotes: 0

Subin Vs
Subin Vs

Reputation: 121

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.

enter image description here

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

enter image description here

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

enter image description here

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

Upvotes: 0

Related Questions