1

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

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

我真正想做的是将画布图像放入同一（或新）页面上的图像持有者（例如，这里使用 Canvas2imageJS doc）。我已经能够使保存功能在新窗口中打开图像，并且还可以将 dataURI 的字符串作为文本框中的文本生成，如jsfiddle 上所示（或代码包括下面的空格持有人），其中单击保存按钮在新的（较小的）窗口中打开图像 (dataURI)，并为 dataURI 生成字符串。

身体{边距：0px；填充：0px；} 画布 { 边框：1px 实心 #9C9898; } #buttons { 位置：绝对；左：10px；顶部：0px；} 按钮 { 边距顶部：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 回答