3

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

4

2 回答 2

2

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>
于 2013-01-07T22:04:31.610 回答
0

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

layer.draw() 

或者

stage.draw() 

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

所以,第 1 步:使用 AJAX 上传(到服务器),第 2 步:添加到阶段,第 3 步:重绘阶段

于 2013-01-07T21:32:35.580 回答