轉換並點擊上傳

有一個畫面上有圖片和一個按鈕。用戶點擊一個按鈕，它被轉換爲img，該圖像發送到form並通過PHP上傳到服務器，我試圖寫點東西，但是這個功能超出了我的能力。轉換並點擊上傳

該怎麼辦？有沒有更簡單的方法來解決問題？

<canvas id="canvas" width="400px" height="400px">HERE USER DRAW< /canvas> 
<button onclick="to_image()">Draw to Image< /button>

這裏是to_image（）：

var canvas = document.getElementById("canvas"); 
document.getElementById("theimage").src = canvas.toDataURL(); 
var data = canvas.toDataURL('image/png');

我試圖改變按鈕像這樣：

<button type="submit" onclick="to_image()">Save< /button>

和創建隱藏的輸入，把這種形象有：

<input type="file" name="file" id="file" style="visibility:hidden"/>

終於改變to_image（）像：

document.getElementById("file").src = data;

仍然沒有任何反應，我是新來的JavaScript和PHP，所以有點不好意思地展現代碼

來源

2013-05-07 bla2eOD

-1：沒有代碼示例，也沒有示範工作。 – 2013-05-07 16:26:14

好的，謝謝，我會添加我的代碼，但很有趣 – bla2eOD 2013-05-07 16:27:44

添加代碼時會刪除-1。 – 2013-05-07 16:28:11

您可以使用JavaScript來獲取畫布的數據，並把它變成一個URL（more information about toDataURL）：

var drawing = document.getElementById('canvas-id').toDataURL('image/png');

然後，您可以通過AJAX調用將此URL提供給服務器，並從那裏進行處理。這將是base64編碼，所以你必須做base64_decode（documentation），那麼你將留下一個圖像blob，你可以用你的PHP保存。

您必須使用POST提交數據，因爲GET在IE和Chrome中具有長度限制。我發現了一個人在做something very similar here with full code examples的例子，以防萬一你被困住了。

來源

2013-05-07 16:39:10

所以，你提供發送URL與POST到PHP，然後使用base64_decode並最終保存在那裏？ – bla2eOD 2013-05-07 16:42:12

您發送帶有POST（通過AJAX）的base64編碼圖像blob，是，然後'base64_decode'並保存。 – 2013-05-07 16:44:57

[這個例子]（http://permadi.com/blog/2010/10/html5-saving-canvas-image-data-using-php-and-ajax/）應該可以幫助你，如果你卡住了。 – 2013-05-07 16:47:28

轉換並點擊上傳

回答

相關問題