我试图让用户通过 html 中的输入将他们自己的图像上传到 kineticJS 阶段。我更喜欢将所有代码保存在一个单独的 js 文件中,这是我目前拥有的:
$(document).ready(function() {
var stage = new Kinetic.Stage({
container: 'container',
width: 900,
height: 500
});
var layer = new Kinetic.Layer();
});
function addImage(){
var imageObj = new Image();
imageObj.onload = function() {
var myImage = new Kinetic.Image({
x: 140,
y: stage.getHeight() / 2 - 59,
image: imageObj,
width: 106,
height: 118
});
layer.add(myImage);
stage.add(layer);
}
var f = document.getElementById('uploadimage').files[0];
var name = f.name;
var url = window.URL;
var src = url.createObjectURL(f);
imageObj.src = src;
}
如何将舞台暴露给 addImage() 方法?目前它超出了它的范围,我还没有弄清楚如何解决这个问题,因为 Canvas 在添加某些东西之前不会显示在 html 中。我需要将这些图像添加为图层以供将来操作,因此想使用 kineticJS。我们欢迎所有的建议!
最佳答案
我设法通过向其附加事件来使您的 addImage 函数正常工作。如果您在 Firefox 中使用 Firebug 控制台或仅按 Ctrl+Shift+J,您可能会遇到 javascript 错误。原来你的函数被读取为未定义,所以现在警报有效,但你的图像没有被添加,因为它们还没有存储在任何地方,比如在服务器上(必须先上传到某个地方)
我使用 jQuery 来附加事件,因为您应该使用它而不是 onclick='function()'
$('#addImg').on('click', function() {
addImage();
});
改变了
<div>
<input type="file" name="img" size="5" id="uploadimage" />
<button id='addImg' value="Upload" >Upload</button>
</div>
关于image - Kineticjs - 帮助从输入文件上传图像到舞台,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14203871/