我试图让用户通过 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() 方法?目前它超出了它的范围,我无法弄清楚如何解决这个问题,因为在向其添加内容之前,画布不会显示在 html 中。我需要将这些图像添加为图层以供将来操作,因此希望使用 kineticJS。我们欢迎所有的建议!