image - Kineticjs - 帮助从输入文件上传图像到舞台

Question

我试图让用户通过 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。我们欢迎所有的建议!

Answer 1

http://jsfiddle.net/8XKBM/12/

我设法通过向其附加事件来使您的 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>