1

ユーザーがドラッグ アンド ドロップを使用してオブジェクトをシーンに配置し、キャンバスを画像として保存したり、画像を facebook/pinterest に投稿したりできる小さなページを作成できるようにしたいと考えています。

私はドラッグ アンド ドロップとデータ URI 機能を、ドラッグ アンド ドロップの画像保存機能とマージされたビーチの動物の例に基づいて KineticJS ライブラリを使用して作成しました。

私が本当にやりたいことは、キャンバス画像を同じ（または新しい）ページの画像ホルダーに配置することです（たとえば、ここでは Canvas2imageJS doc を使用しています）。保存機能で画像を新しいウィンドウで開き、保存ボタンをクリックするjsfiddle（または以下の空白スペースホルダーを含むコード）でここに示すように、テキストボックス内のテキストとしてdataURIの文字列を生成することもできました画像 (dataURI) を新しい (小さい) ウィンドウで開き、dataURI の文字列も生成します。

ボディ { 余白: 0px; パディング: 0px; } キャンバス { ボーダー: 1px ソリッド #9C9898; } #buttons { 位置: 絶対; 左: 10px; 上: 0px; } ボタン { margin-top: 10px; 表示ブロック;

  }
    #imgArea{ border: 2px solid red; min-width: 576px; min-height:200px; display: block;}
</style>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.3.js"></script>
<script>
  window.onload = function() {
    var stage = new Kinetic.Stage({
      container: 'container',
      width: 578,
      height: 200
    });
    var layer = new Kinetic.Layer();
    var rectX = stage.getWidth() / 2 - 50;
    var rectY = stage.getHeight() / 2 - 25;

    var box = new Kinetic.Rect({
      x: rectX,
      y: rectY,
      width: 100,
      height: 50,
      fill: '#00D2FF',
      stroke: 'black',
      strokeWidth: 4,
      draggable: true
    });

    box.on('mouseover', function() {
      document.body.style.cursor = 'pointer';
    });

    box.on('mouseout', function() {
      document.body.style.cursor = 'default';
    });

    layer.add(box);
    stage.add(layer);

    document.getElementById('save').addEventListener('click', function() {
      stage.toDataURL({
        callback: function(dataUrl) {
    document.getElementById("textArea").value = dataUrl;

          window.open(dataUrl, "toDataURL() image", "width=600, height=200");
        }

      });
    }, false);
  };

</script>   </head>   <body>
<div id="container"></div>
<div id="buttons">
  <button id="save">
    Save as image
  </button>
</div><div style="">
  <textarea rows="10" cols="60" id="textArea"></textarea><br>
  Your picture will appear here:

  <img id="imgArea"/></div>

     </body> </html>

ボタンをクリックした結果を生成して、生成された画像を Facebook / pinterest ウォールに共有/投稿できるようにする方法を誰かが理解するのを手伝ってくれませんか? 私の進行中の作業もここにあります (ドラッグ アンド ドロップして、新しいウィンドウでのみ dataURI を生成します): www.shugar.com.au/obar/Default4.html

4

1 に答える 1

0

window.open(dataURL); を実行しないでください。

dataURL を取得し、AJAX を Facebook に送信するなど、別の処理を行います。

正確な構文は忘れましたが、次のようになります。

 $.ajax({
    url: facebook.com/myaccountUpload/somethingsomething, //here you need the url to upload it to Facebook
    data: dataURL,
    success: function(response){
       alert('uploaded to Facebook');
    },
    error: .... console.log(error);
 });
于 2013-01-11T17:09:23.967 に答える