Question

我希望能够创建一个小页面，用户可以使用拖放操作将对象放置在场景上，然后将画布保存为图像，或将图像发布到facebook / pinterest。

我使用基于动物的KineticJS库创建了拖放和dataURI功能，该示例与拖放保存图像功能合并。

我真正希望能够将画布图像放在同一（或新）页面上的图像持有者中（例如，here using the Canvas2imageJS doc）。我已经能够使保存功能在新窗口中打开图像，并在文本框中生成dataURI的字符串，如图所示here on jsfiddle（或代码包括下方的空格支架），点击保存按钮在新的（较小的）窗口中打开图像（dataURI），并为dataURI生成字符串。

身体 { 保证金：0px; 填充：0px; } 帆布{ border：1px solid＃9C9898; } ＃纽扣 { 位置：绝对; 左：10px; 顶部：0px; } 按钮{ margin-top：10px; display：block;

  }
    #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

Answer 1

好吧，不要做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);
 });

从dataURL生成画布复制（jpg / image）

1 个答案: