Animate image base64 - urgent

[Srgl]

Hello,

I'm struggling trying to change the jpg image of a banner to a base64 generated image.

The goal is to create a banner with only an html, without external loaded files.

I tried different article with no success.

I only have a single image to load and I will appreciate every kind of help.

Thank you

[JoãoCésar]

Hi.

You basically need the code of the image in base64 (this website worked really well for me) and to pass the generated base64 string to the createjs.Bitmap constructor. Like this:

var base64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAC4UlEQVRYhcWXv1MaQRTHP7v8SrTQRlo5cLSgiJWtZ+9MrGyDtc4k+QuktqKwh7RUZsZe0l4TUlDExNtLS4UFThS4TQFcUPbOgyHmO3PF7b593+/uvn27TzADbm7yK1KmbNDbISae1r1GPq9+xfUp4hgptfUWdAnEQUy/Huia7/crhYJ7O7cApTZ2IVEDcjGJn0B3gEqUkFABSm29ByrzEU8JaWrdOzBtjVGAUptVEKXFkAciOlpj5/PX3yZbpYH83eLJAcSqENRubvIrj1oN5LXFk09CN32/b49jIlgB17XW/z05gNiWMhnEViBAiPQLkAdspeEJGwkY/dgvJwAgUQ4EjH+eotVKcHr6GsdJzEVxfp7h/DwT1m0rtbErh3tvnn2rlQi+WdHtQqORotFIRVjJkhQiZSQHUEoGQmbF5Jixn2kIWxKRZu/uhqfU82YXMDlm7MeAnARhh/WurfkALC3pmQXEHRO2NgBks0MnOzv9mQVMjsnlBqF2ySgntt2j1Uqwtze7gGxWc3j4AMDycridUGrrihfPAX8hQXv/i3wkQDRNHY4z3/k3ITwZ6Y6EgVFAtyuislhsXF0lIyYimtKyfn4ZPZ0eYRx4l5dRmSwa3S7U6+kgGA24GB9D49Pr5OSeej1Nux3r7TqFej1NNqtDTpHu+H6vJgG07tVMDorFAfv7ParVzMwiHCeB4yQ5Pv4dZnJRKLi3gVelNk9BlE2WSknOzl5xdHTPzk54UgFotwX1ehoYrqAZuuP7/dwjASMRX0EYi45uF6rVDJ4nse0+luVP9TtOEs+THB4+PCf0wLK+f4Ynb0LXtdaFSDVBrEbN0HGGkT15yeRyA4rFwbMrBH7Fsn58HP9Nbazrbr4RgkaUiPmha5Z1fTTZYoysYQ2YbIRtx5zkJcu6/vS01XgbFgrure/3baCxAGYvjBxiFKejWqHMXPWhX/H9QTmqQI19uIcVMh94/ub04lbGAH8AAHYqIzm6lBUAAAAASUVORK5CYII=";

var bitmap = new createjs.Bitmap(base64);

this.addChild(bitmap);

I hope this helps.

Regards,

JC

[Srgl]

Hello JC,

sorry but it's not clear where to put the code.

I generated the base64 string with the website you suggested and added the 2 var in the <script> at the beginning.

But How to let animate use the new image instead of the jpg?

Can you please be a little more exahustive?

Thanks!

A

[JoãoCésar]

Hi.

You should actually place the code in a timeline in the frame where your bitmap is displayed.

Where is your image coming from now?

[Srgl]

Ok, done it. And it works properly, nice and thank you!

Every guide i found online was pretty old and made me change the encoded images in the html/js script. And never worked. Or at least not with this version of Animate.

I also found very old files (2018) with that kind of embedding and it worked properly. So I suppose something changed in the exportation of Animate, dunno.

Thank you btw, you made my day 🙂

[interactiv HTML5 Canvas]

Hello Jookeésar!

Your code is beautiful, but it works if one picture and export as graphic resources.

I have dozens of pictures in MovieClip and I have to unite them into a “sprite sheet”.

When you put the export of the “sprite” and saves _atlas_p_1.png, the code stops working.

I would be very grateful if you can help me with this.

[Asa246722338dy7]

Hello, i need to do the same for all the images in the library automatically to base64 and include them to a single file. Do you think there is a solution? I am using this code that works perfectly well to convert a "String" to base64 but it will not convert the main image code but the string of the filename.

function base64Encode(e) {
	var k = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
	var t = "";
	var n, r, i, s, o, u, a;
	var f = 0;
	//e = utf8_encode(e);
	l = e.length;
	var c = 0;
	while (c<l) {
		c+=1000;
		while (f < l && f < c) {
			n = e.charCodeAt(f++);
			r = e.charCodeAt(f++);
			i = e.charCodeAt(f++);
			s = n >> 2;
			o = (n & 3) << 4 | r >> 4;
			u = (r & 15) << 2 | i >> 6;
			a = i & 63;
			if (isNaN(r)) {
				u = a = 64
			} else if (isNaN(i)) {
				a = 64
			}
			t = t + k.charAt(s) + k.charAt(o) +
				k.charAt(u) + k.charAt(a)
		}
	
	}
	return t
};

[программист_6529]

in html file

const imgB64 = '/9j/4AAQSkZ'

lib.properties = {

id: '56F658CCB82B59469876613C0CD35AB2',

width: 550,
height: 400,
fps: 24,
color: "#FFFFFF",
opacity: 1.00,

manifest: [

{type:createjs.AbstractLoader.IMAGE,
src:`data&colon;image/png;base64,${imgB64}`, id:"ZHNEFA"}
],
preloads: []
};

[interactiv HTML5 Canvas]

Your code couldn't be implemented. Could you send an html file with an attachment?