![](/img/trans.png)
[英]How to save canvas image to server with JavaScript and PHP?
[英]How save image from canvas tag to php server?
我有這樣的javascript代碼
var testCanvas = document.getElementById('canvas-1');
var canvasData = testCanvas.toDataURL("image/png");
var ajax = new XMLHttpRequest();
ajax.open("POST",'http://www.domain.com/imgsave.php',true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');
ajax.send("canvasData"+canvasData );
我的PHP代碼是這樣的
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
// Get the data
$imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
$filteredData=substr($imageData, strpos($imageData, ",")+1);
$unencodedData=base64_decode($filteredData);
$fp = fopen( 'test.png', 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );
echo "saved";
}
else{
echo "no raw data";
}
執行此代碼時,我得到一個零大小的png文件圖像? 我的代碼有問題嗎?
我最近自己必須這樣做。
首先,我將canvasData放入隱藏字段並將其發布到我的PHP頁面。
它以這種格式返回: data:image/png;base64,iVBORw0......
您需要首先拆分數據,因為: data:image/png;base64,
是標題信息。 其余的是編碼數據。
$rawData = $_POST['imageData'];
$filteredData = explode(',', $rawData);
$unencoded = base64_decode($filteredData[1]);
然后我在我的服務器上創建圖像:
//Create the image
$fp = fopen('sigs/test1.png', 'w');
fwrite($fp, $unencoded);
fclose($fp);
然后閱讀它以做任何我想要的事情。
$file_name = 'test1.png';
$file_size = strlen($filteredData[1])/1024; //This may be wrong, doesn't seem to break for me though.
$fh = fopen('sigs/test1.png', 'r');
$content = fread($fh, $file_size);
$content = base64_encode($content);
fclose($fh);
我更確定有一個更優雅的解決方案,但這對我有用!
檢查這個以獲取更多信息(可能): 我自己的問題
這是我通過ajax從畫布保存圖像的方法。 我在客戶端使用jQuery
jQuery.ajax({
url: 'save.php',
type: 'POST',
data: {
data: c.toDataURL('image/png')
},
complete: function(data, status)
{
if(status=='success')
{
alert('saved!');
}
alert('Error has been occurred');
}
});
PHP:
$based64Image=substr($_POST['data'], strpos($_POST['data'], ',')+1);
$image = imagecreatefromstring(base64_decode($based64Image));
$fileName='';
if($image != false)
{
$fileName=time().'.png';
if(!imagepng($image, $fileName))
{
// fail;
}
}
else
{
// fail;
}
我希望這有幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.