使用 canvas.toDataURL() 解碼和保存圖像

Question

我正在處理一個項目，該項目涉及用戶將框拖放到 div 上以創建布局。 用戶完成后，有一個按鈕可以按下，該按鈕獲取 div 並使用 html2canvas 從中創建一個畫布元素，然后它在新窗口中作為圖像打開。 這很好，但我需要將它保存在某個地方，以便將其附加到電子郵件並發送。 到目前為止，我所擁有的只是 base64 編碼的字符串，我無法對其進行任何操作。

在js方面，我有：

html2canvas($('#canvas')).then(function(canvas) {
    $('canvas').addClass('canvas-layout');
    var src = canvas.toDataURL();
    var output=src.replace(/^data:image\/(png|jpg);base64,/, "");
    $.post( 'result.php', { data: output })
        .done( function(response) {
            console.log(response);
        }
    );
    return false;
});

其中#canvas 是 div 的 ID。 在 result.php 文件中，我有：

$decodedData = base64_decode($_POST['data']);

$img = $decodedData;

$image = fopen($img, 'r');
file_put_contents("images/layout.png", $image);
fclose($image);

但是我收到一條警告，說我正在將一個字符串傳遞給 fopen() - 盡管這個解決方案是在另一個 stackoverflow 帖子中給出的，人們似乎可以做到這一點。 最初，js 只是在新窗口中打開圖像，如下所示：

window.open(src,'Image','width=1440,height=650,resizable=1');

但是瀏覽器窗口中的 URL 是 base64 編碼的字符串，我無能為力。

有沒有辦法做我想要實現的目標？

謝謝

Answer 1

好的 - 我已經整理好了。 基本上，我需要在能夠寫入之前從字符串中修剪一些其他數據。

所以，我在file_put_contents之前添加了這段代碼：

$img = $_POST['data']; // Using the raw encoded string
$img = str_replace('data:image/png;base64,', '', $img); // removed unnecessary string
$img = str_replace(' ', '+', $img);
$data = base64_decode($img); // then decoded it
$file = "images/layout-file_". uniqid().".png"; // define new image name
$success = file_put_contents($file, $data); // finally write to server

這樣它會生成一個唯一命名的文件並且不會損壞。