2012-12-08 73 views
1

我希望能夠製作一個小頁面,用戶可以在其中使用拖放功能將場景放置在場景中,然後將其畫布保存爲圖像或張貼形象到facebook/pinterest。從dataURL生成畫布複製(jpg/img)

我已經使用KineticJS庫創建了拖放和dataURI功能,該庫基於與拖放保存圖像功能合併的海灘示例上的動物。

我真正想要做的是將畫布圖像放在同一個(或新的)頁面的圖像保持器中(例如,here using the Canvas2imageJS doc)。我已經能夠使保存功能在新窗口中打開圖像,並在文本框中以文本形式生成dataURI的字符串,如here on jsfiddle(或包含下面的空白區域的代碼),點擊保存按鈕打開image(dataURI)在一個新的(較小的)窗口中,並且還爲dataURI生成字符串。

體{ 餘量:0像素; padding:0px; } canvas:邊框:1px實體#9C9898; } #buttons { position:absolute; left:10px; top: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

回答

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); 
});