解碼畫布todataURL

我很難用canvas的todataurl（）方法創建數據。目前我的代碼將結果數據發送到我的php服務器，該服務器使用file_put_contents（）方法創建一個文件來存儲該數據。現在，如果我從文件中剪切並粘貼得到的亂碼到一個圖像標籤src中，它可以正常工作並正常顯示，因此我認爲一切都很好。解碼畫布todataURL

但是當我嘗試在JS中使用代碼時，我一直遇到問題。我試過php的base64_decode方法，但不斷得到中斷文件。我發現這個代碼：

<?php 
    $encodedData = str_replace(' ','+',$encodedData); 
    $decocedData = base64_decode($encodedData);

仍然有被破壞的文件。理想情況下，我想創建一個.png文件，但我會解決只是在JS中處理數據文件。任何幫助不勝感激。

來源

2011-09-03 joel

您只需讀取MIME類型（可能是固定/已知的）和編碼（可能沒有）來解釋數據，這是標準的Base64。如果您先前對URL進行了URL編碼，則不會有任何空間被替換。 [PHP-FileUpload]（https://github.com/delight-im/PHP-FileUpload）有一個['DataUriUpload']（https://github.com/delight-im/PHP-FileUpload/blob/023f812226673ac9e0696d8a3579bb7380606dda/ src/DataUriUpload.php）組件，它自動完成所有這些。它記錄在[這裏]（https://github.com/delight-im/PHP-FileUpload/tree/023f812226673ac9e0696d8a3579bb7380606dda#data-uri-uploads）。 – caw

看來你必須擺脫由toDataURL()函數預先圖像數據的頭。在客戶端就可以剝離這樣的標題：）這些瀏覽器

<?php 
    $decocedData = base64_decode($encodedData); 
?>

來源

2011-09-03 04:58:37 stewe

這很有幫助，這是我最終做的事情，如果有人需要在將來也這樣做：\t $ backGround = substr（$ backGround，22）; \t $ backGround = str_replace（''，'+'，$ backGround）; \t $ backGround = base64_decode（$ backGround）; \t file_put_contents（「currentBG1。png「，$ backGround）; – joel

需要將jpeg添加到正則表達式中：var output = data.replace（/^data：image \ /（png | jpg | jpeg）; base64，/，」「）; – dickyj

在Java腳本從canvas.toDataURL（發送結果：

.. 
var data=canvas.toDataURL(); 
var output=data.replace(/^data:image\/(png|jpg);base64,/, ""); 
// now send "output" to the server 
..

在服務器端使用此比默認類型的「image/png」支持這種方法。

var imageInfo = canvas.toDataURL(); 
// now send "imageInfo" to the server

創建PNG文件直接方式：

<?php 
$imageInfo = imageInfoFromBrowser(); // Your method to get the data 
$image = fopen($imageInfo, 'r'); 
file_put_contents("fileName.png", $image); 
fclose($image); 
?>

我在PHP 5.3這個工作/ Windows雙操作系統，其他的版本，請檢查。

用於在PHP上進行測試的圖像數據樣本。

$imageInfo = "data:image/png;base64,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"

來源

2012-01-13 09:18:21

如果這樣做失敗，請發佈你的PHP環境。謝謝。 –

canvas.toDataUrl（）...這是什麼？ – realtebo

'canvas.toDataUrl（）'用於例如[fabric.js]（http：//您可以通過JavaScript獲取畫布var imageInfo = document.getElementById（「yourid」）。toDataURL（）;'或者通過JQuery' var imageInfo = $（「＃yourid」）。toDataURL（） ;' @DanielDeLeón發佈的解決方案非常有用，謝謝 – ptCoder

另一個重要的注意事項是，你必須將空格轉換爲加號。如果你不這樣做，解碼後的數據被破壞：

$encodedData = str_replace(' ','+',$encodedData); 
$decocedData = base64_decode($encodedData);

你可以閱讀更多的http://www.php.net/manual/en/function.base64-decode.php

來源

2012-04-09 15:18:35 hiddentstones

其他解決方案並沒有爲我工作。

這工作：

//image sample 
$baseFromJavascript = "data:image/png;base64,BBBFBfj42Pj4"; 

// remove the part that we don't need from the provided image and decode it 
$data = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $baseFromJavascript));

來源

2018-01-15 13:26:17

解碼畫布todataURL

回答

相關問題