我有一個保存按鈕的畫布繪圖工具。當你點擊保存按鈕時,它執行這個代碼。AJAX,PHP和畫布URI
function saveDrawing() {
var url = canvas.toDataURL();
w = window.open('saveimage.php');
w.onload = function(){
var placeholder = w.document.getElementById("placeholder");
placeholder.src = url;
};
}
圖像在新窗口的佔位符元素中顯示。從這個頁面我想包括兩個按鈕之一以.png形式下載圖像,另一個通過電子郵件提交png以及一些表單數據。我明白php必須用來處理服務器端的東西。我環顧網絡並提出了這個問題。
Ajax請求在saveimage.php:
function saveViaAJAX(){
var placeholder = document.getElementById("placeholder");
var canvasData = placeholder.src;
var postData = "canvasData="+canvasData;
var ajax = new XMLHttpRequest();
ajax.open("POST",'save.php',true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');
ajax.send(postData);
}
和save.php:
<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) {
$imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
$filteredData=substr($imageData, strpos($imageData, ",")+1);
$unencodedData=base64_decode($filteredData);
$fp = fopen('drawing.png', 'wb');
fwrite($fp, $unencodedData);
fclose($fp);
}
?>
在saveimage.php保存按鈕看起來是這樣的:
<button onclick="saveViaAJAX();" class="button">
當按鈕被點擊時我什麼也得不到。這甚至是解決這個問題的最好方法嗎?或者我應該從dataToURL();直接將PHP解碼並存儲,並在我的佔位符元素中包含php變量?我需要一個會話來做到這一點嗎?這一點有點失落。服務器端並不是我的強項。提前致謝!
您的jQuery代碼使用GET,但您的PHP代碼正在尋找'$ GLOBALS ['HTTP_RAW_POST_DATA']'。當你使用GET時,它會被填充嗎? – 2012-03-19 15:40:15
我試過後得到。控制檯對兩者都說同樣的事情。 – cl0udc0ntr0l 2012-03-19 15:53:26
看來我沒有從服務器獲得響應。 ajax.onReadyStateChange = function {if(ajax.readyState == 4){alert(ajax.responseText); } } 沒有警報彈出。 – cl0udc0ntr0l 2012-03-19 16:48:40