如何在此代码中替换base64的图像路径？
如何在此代码中替换base64的图像路径？
提问于 2015-11-22 14:27:34
我正致力于在画布中实现万花筒效果，我使用的代码来自：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>回答 1
Stack Overflow用户
回答已采纳
发布于 2015-11-22 14:52:03
位图类 of 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();
})();下面是完整的代码(参见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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33855882
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号