Skip to main content
Srgl
Inspiring
June 30, 2022
Question

Animate image base64 - urgent

  • June 30, 2022
  • 2 replies
  • 967 views

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 has been closed for replies.

2 replies

Participant
September 6, 2024

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: []
};

interactiv HTML5 Canvas
Participating Frequently
November 11, 2024

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

JoãoCésar17023019
Community Expert
Community Expert
June 30, 2022

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
SrglAuthor
Inspiring
June 30, 2022

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ésar17023019
Community Expert
Community Expert
June 30, 2022

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?