Javascript 如何在此代码中替换base64的映像路径？_Javascript_Canvas_Createjs_Easeljs

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

javascript canvas

Javascript 如何在此代码中替换base64的映像路径？,javascript,canvas,createjs,easeljs,Javascript,Canvas,Createjs,Easeljs,我正在画布上制作万花筒效果，我使用以下代码作为示例：（您可以检查它是否正在工作：）但是，当我尝试将其用于base64映像而不是常规映像路径时，代码停止工作。我可以做些什么改变来让它工作代码如下： <!DOCTYPE html> <html> <head> <title>EaselJS Kaleidoscope Demo</title> <style> body { bac

我正在画布上制作万花筒效果，我使用以下代码作为示例：

（您可以检查它是否正在工作：）

但是，当我尝试将其用于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>


EaselJS万花筒演示
身体{
背景色：#111；
字体系列：Arial，无衬线；
字号：12号；
文本对齐：居中；
颜色：#FFF；
}


美国宇航局拍摄的星云图像。
var imagePath=“imgs/pic.jpg”；
var c=createjs；
变量q、半径、阶段、源、kal；
（函数init（）{
q=新的c.LoadQueue（false）；
q、 加载文件（图像路径）；
q、 addEventListener（“完成”，运行）；
})();
功能运行（evt）{
阶段=新的c阶段（“演示”）；
var w=stage.canvas.width；
var h=stage.canvas.height
//计算万花筒的半径：
半径=w/2-10；
source=新的c.Bitmap（q.getResult（imagePath））；
//设置中心点：
source.regX=source.image.width/2；
source.regY=source.image.height/2；
//缩放以填充半径：
source.scaleX=半径/source.image.width*2；
source.scaleY=半径/source.image.height*2；
//创建万花筒：
kal=stage.addChild（新的万花筒（半径，源，6，[3,5,3,1,7,1]）；
kal.rotation=18；//拉直它（因为图案复杂而有必要）
//以舞台为中心：
kal.x=w/2；
kal.y=h/2；
c、 股票代码。添加的股票列表（“勾号”，勾号）；
}
函数tick（）{
source.rotation-=1；
stage.update（）；
}

EaselJS的构造函数在其构造函数中接受

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();
})();

以下是完整的代码（请参见上的）：


EaselJS万花筒演示
身体{
背景色：#111；
字体系列：Arial，无衬线；
字号：12号；
文本对齐：居中；
颜色：#FFF；
}


美国宇航局拍摄的星云图像。
var c=createjs；
var半径、阶段、源、kal；
var imageBase64=“数据：image/jpeg；base64，…”；
（函数init（）{
run（）；
})();
函数运行（）{
阶段=新的c阶段（“演示”）；
var w=stage.canvas.width；
var h=stage.canvas.height
//计算万花筒的半径：
半径=w/2-10；
var imageObject=document.createElement（“IMG”）；
setAttribute（'src'，imageBase64）；
source=新的c.Bitmap（imageObject）；
//设置中心点：
source.regX=source.image.width/2；
source.regY=source.image.height/2；
//缩放以填充半径：
source.scaleX=半径/source.image.width*2；
source.scaleY=半径/source.image.height*2；
//创建万花筒：
kal=stage.addChild（新的万花筒（半径，源，6，[3,5,3,1,7,1]）；
kal.rotation=18；//拉直它（因为图案复杂而有必要）
//以舞台为中心：
kal.x=w/2；
kal.y=h/2；
c、 股票代码。添加的股票列表（“勾号”，勾号）；
}
函数tick（）{
source.rotation-=1；
stage.update（）；
}

非常感谢Marcos Dimitrio，这就是我要找的。

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