Skip to main content
Srgl
Inspiring
Jun 30, 2022 7:56 AM UTC
Question

Animate image base64 - urgent

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

This topic is closed to new replies. Start a new post to keep the conversation going.

8 replies

Participant
Sep 6, 2024 2:46 PM UTC

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:image/png;base64,${imgB64}`, id:"ZHNEFA"}
],
preloads: []
};

Translate
interactiv HTML5 Canvas
Participating Frequently
Nov 11, 2024 7:38 PM UTC

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

Translate
JoãoCésar17023019
Community Expert
Community Expert
Jun 30, 2022 9:56 AM UTC

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

Translate
Srgl
SrglAuthor
Inspiring
Jun 30, 2022 10:06 AM UTC

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

Translate
JoãoCésar17023019
Community Expert
Community Expert
Jun 30, 2022 10:30 AM UTC

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?

Translate