我正在努力在画布上制作万花筒效果,我使用的代码来自: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>
答案 0 :(得分:0)
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>