如何保存画布图像到服务器与JavaScript和PHP？

Question

我正在努力使用JavaScript和PHP将我的画布图像保存到服务器。我已经尝试了JS和PHP的多个例子，但总是失败。关于如何将图像数据发送到PHP脚本（bas64、blob、FormData），有相互矛盾的建议，我不确定如何最好地与JS通信。目前，零字节的PNG文件被保存到服务器，我不知道为什么。我想在服务器上将生成的画布保存为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和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.';
?>

Answer 2

在js页面中添加控制台。日志（base64img）

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

消息将是data： Image/jpeg； bas64，/9j/4AAQSk......。

在php页面中；

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

现在你就知道图像是否会出现。

如果图像没有显示，您没有正确实现提取方法

如果图像显示，看看你是否能够创建dir/file.也就是说，apache有权限创建dir/file.如果你能够