How to replace a image path for base64 in this code?

Question

I'm working to make a kaleidoscope effect in canvas, I'm using as example a code from: https://github.com/CreateJS/sandbox/blob/master/Kaleidoscope/demo.html

(you can check it working on: http://sandbox.createjs.com/Kaleidoscope/demo.html)

But when I try to use it with a base64 image instead of a regular image path the code stops working. What changes can I do to make it work?

This is the code:

<!DOCTYPE html>
<html>
  <head>
    <title>EaselJS Kaleidoscope Demo</title>
    <style>
      body {
        background-color: #111;
        font-family: Arial, sans-serif;
        font-size: 12pt;
        text-align: center;
        color: #FFF;
      }
    </style>
  </head>
  <body>
    <canvas id="demo" width="800" height="800"></canvas>
    <br>
    Nebula image by NASA.
    <script src="http://code.createjs.com/createjs-2013.02.12.min.js"></script><script src="Kaleidoscope.js"></script>
    <script>
      var imagePath = "imgs/pic.jpg";
      var c = createjs;
      var q, radius, stage, source, kal;

      (function init() {
        q = new c.LoadQueue(false);
        q.loadFile(imagePath);
        q.addEventListener("complete", run);
      })();

      function run(evt) {
        stage = new c.Stage("demo");
        var w = stage.canvas.width;
        var h = stage.canvas.height

        // calculate the radius of the kaleidoscope:
        radius = w/2-10;

        source = new c.Bitmap(q.getResult(imagePath));
        // set the center point:
        source.regX = source.image.width/2;
        source.regY = source.image.height/2;
        // scale to fill the radius:
        source.scaleX = radius/source.image.width*2;
        source.scaleY = radius/source.image.height*2;

        // create the kaleidoscope:
        kal = stage.addChild(new Kaleidoscope(radius, source, 6, [3,5,3,1,7,1]));
        kal.rotation = 18; // straighten it (necessary because of complex pattern)
        // center on the stage:
        kal.x = w/2; 
        kal.y = h/2;

        c.Ticker.addEventListener("tick", tick);
      }

      function tick() {
        source.rotation -= 1;
        stage.update();
      }
     </script>
   </body>
 </html>

Marcos Dimitrio · Accepted Answer · 2015-11-22T16:38:30.350

The Bitmap class of EaselJS accepts a HTMLImageElement in its constructor, so you can create an img object in memory from the Base64 image string and feed it to the constructor:

var imageBase64 = "data:image/jpeg;base64,...";

//...

var imageObject = document.createElement("IMG");
imageObject.setAttribute('src', imageBase64);
source = new c.Bitmap(imageObject);

And since you will load this from a string, you don't need LoadQueue anymore, your init will be:

(function init() {
    run();
})();

Here is the full code (see it on JSFiddle):

<!DOCTYPE html><html><head>
<title>EaselJS Kaleidoscope Demo</title>
<style>
    body {
        background-color: #111;
        font-family: Arial, sans-serif;
        font-size: 12pt;
        text-align: center;
        color: #FFF;
    }
</style>
</head>
<body>

<canvas id="demo" width="800" height="800"></canvas><br>
Nebula image by NASA.

<script src="http://code.createjs.com/createjs-2013.02.12.min.js"></script>
<script src="Kaleidoscope.js"></script>
<script>
var c = createjs;
var radius, stage, source, kal;
var imageBase64 = "data:image/jpeg;base64,...";

(function init() {
    run();
})();

function run() {
    stage = new c.Stage("demo");
    var w = stage.canvas.width;
    var h = stage.canvas.height

    // calculate the radius of the kaleidoscope:
    radius = w/2-10;

    var imageObject = document.createElement("IMG");
    imageObject.setAttribute('src', imageBase64);
    source = new c.Bitmap(imageObject);

    // set the center point:
    source.regX = source.image.width/2;
    source.regY = source.image.height/2;
    // scale to fill the radius:
    source.scaleX = radius/source.image.width*2;
    source.scaleY = radius/source.image.height*2;

    // create the kaleidoscope:
    kal = stage.addChild(new Kaleidoscope(radius, source, 6, [3,5,3,1,7,1]));
    kal.rotation = 18; // straighten it (necessary because of complex pattern)
    // center on the stage:
    kal.x = w/2; 
    kal.y = h/2;

    c.Ticker.addEventListener("tick", tick);
}

function tick() {
    source.rotation -= 1;
    stage.update();
}
</script>
</body>
</html>

Thank you very much Marcos Dimitrio, this is what I´m looking for. — user3822492, Nov 22 '15 at 19:25

How to replace a image path for base64 in this code?

1 Answers1