如何在此代码中替换 base64 的图像路径？

Question

我正在努力在 canvas 中制作万花筒效果，我使用的示例代码来自：https://github.com/CreateJS/sandbox/blob/master/Kaleidoscope/demo.html

（您可以检查它是否正在运行：http://sandbox.createjs.com/Kaleidoscope/demo.html）

但是当我尝试将它与 base64 图像而不是常规图像路径一起使用时，代码停止工作。我可以做哪些改变才能让它发挥作用？

这是代码：

<!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>

Answer 1

EaselJS 的 Bitmap class 在其构造函数中接受一个 HTMLImageElement，因此您可以从 Base64 图像字符串在内存中创建一个 img 对象并将其提供给构造函数：

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

//...

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

并且由于您将从字符串中加载它，因此您不再需要 LoadQueue，您的 init 将是：

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

这是完整的代码（在 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>

如何在此代码中替换 base64 的图像路径？

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

javascript

canvas

easeljs

createjs