我希望能夠製作一個小頁面,用戶可以在其中使用拖放功能將場景放置在場景中,然後將其畫布保存爲圖像或張貼形象到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