Question

我正在努力在画布上制作万花筒效果，我使用的代码来自：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的图像路径？

1 个答案: