如何使用 JavaScript 和 PHP 将 canvas 图像保存到服务器？

Question

我正在努力使用 JavaScript 和 PHP 将我的 canvas 图像保存到服务器。 我已经为 JS 和 PHP 尝试了多个示例，但它总是失败。 关于如何将图像数据发送到 PHP 脚本（base64、blob、FormData）存在相互矛盾的建议，我不确定如何最好地与 JS 进行通信。 目前，零字节 PNG 文件正在保存到服务器，我不知道为什么。 我想将生成的 canvas 保存为服务器上的 PNG，并在成功时在 JS 中执行命令。 如何最好地接近它？

JS：

var off_canvas = document.createElement('canvas');
off_canvas.width = 1080;
off_canvas.height= 1080;
var ctx = off_canvas.getContext("2d");
var brick = new Image();
brick.src = '../img/brick-white.jpg'; 
brick.onload = function(){
    var pattern = ctx.createPattern(this, "repeat");
    ctx.fillStyle = pattern;
    ctx.fill();
};
var base64img = off_canvas.toDataURL("image/jpeg");

fetch("../php/save_image.php", {
    method: "POST",
    image: base64img
})  .then(response => response.text())
    .then(success => console.log(success)) //execute command
    .catch(error => console.log(error));

PHP：

<?php
    $img = $_POST['image'];
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    
    if (!file_exists($_SERVER['DOCUMENT_ROOT'] . "/img")) {
        mkdir($_SERVER['DOCUMENT_ROOT'] . "/img", 0777, true);
    }
    
    $file = $_SERVER['DOCUMENT_ROOT'] . "/img/".time().'.png';
    
    $success = file_put_contents($file, $data);
    print $success ? $file.' saved.' : 'Unable to save the file.';
?>

Answer 1

在你的 js 页面中添加console.log(base64img);

在浏览器控制台中，复制 object。 我使用 firefox，如果您使用其他东西，然后从那里复制控制台消息。

消息将是data:image/jpeg;base64,/9j/4AAQSk.....

在您的 php 页面中；

$img = "data:image/jpeg;base64,/9j/4AAQSk.....";
echo "<img src='$data' />"; exit;

现在您将知道图像是否出现。

如果图像未显示您未正确实现fetch方法

如果显示图像，请查看您是否能够创建目录/文件。 即 apache 具有创建目录/文件的权限。 如果你能

Answer 2

在对 JS 和 PHP 的多个选项进行了一些摆弄之后，这就是最终奏效的方法：

JS

var off_canvas = document.createElement('canvas');
off_canvas.width = 1080;
off_canvas.height = 1080;
var off_ctx = off_canvas.getContext("2d");

off_ctx.beginPath();
off_ctx.rect(20, 20, 150, 800);
off_ctx.fillStyle = "red";
off_ctx.fill();

var brick = new Image();
brick.src =  "img/brick-white.jpg";
brick.onload = function(){
    var pattern = off_ctx.createPattern(brick, "repeat");
    off_ctx.fillStyle = pattern;
    off_ctx.fillRect(500, 0, 1000, 1000);
    
    // needs delay to fully render to canvas
    var timer = window.setTimeout(save_canvas(off_canvas), 500);
};

function save_canvas(c) {
    var b64Image = c.toDataURL("image/png");
    
    fetch("../php/save_image_b64.php", {
        method: "POST",
        mode: "no-cors",
        headers: {"Content-Type": "application/x-www-form-urlencoded"},
        body: b64Image
    })  .then(response => response.text())
        .then(success => console.log(success))
        .catch(error => console.log(error));
}

PHP

<?php
    $img = file_get_contents("php://input"); // $_POST didn't work
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    
    if (!file_exists($_SERVER['DOCUMENT_ROOT'] . "/img")) {
        mkdir($_SERVER['DOCUMENT_ROOT'] . "/img", 0777, true);
    }
    
    $file = $_SERVER['DOCUMENT_ROOT'] . "/img/".time().'.png';
    
    $success = file_put_contents($file, $data);
    print $success ? $file.' saved.' : 'Unable to save the file.';
?>