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 エラーが発生する可能性があります。関数が未定義として読み取られていたことが判明したため、アラートは機能していますが、サーバーのようにまだどこにも保存されていないため、画像は追加されません (最初にどこかにアップロードする必要があります)。

onclick='function()' の代わりに使用する必要があるため、jQuery を使用してイベントをアタッチしました。

$('#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()

ページがロードされ、 img.src が最後に定義されるまで、ブラウザーは画像を描画しないため、キャンバスに写真が描画されるように addImage() 関数の最後に追加します。したがって、これは基本的に、難しいことではなく、物事が正しい順序で行われることを必要とします.

したがって、ステップ 1: AJAX を使用して (サーバーに) アップロードし、ステップ 2: ステージに追加し、ステップ 3: ステージを再描画します。

于 2013-01-07T21:32:35.580 に答える