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步：重绘阶段

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

2 个答案: