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() 方法？目前它超出了它的范围，我无法弄清楚如何解决这个问题，因为在向其中添加内容之前，画布不会显示在 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>

Answer 2

您真正想做的是让用户使用 AJAX 即时上传照片（到服务器）（可用于 jQuery，不干扰 KineticJS）。然后，成功后，您可以使用您的功能将照片绘制到画布上。确保使用：

layer.draw() 

或

stage.draw() 

在 addImage() 函数的末尾，以便在您的画布上绘制照片，因为浏览器直到页面加载并且在末尾定义 img.src 之后才会绘制图像。所以，这基本上只需要事情的顺序正确而不是困难。

所以，第 1 步：使用 AJAX 上传（到服务器），第 2 步：添加到阶段，第 3 步：重绘阶段