php canvas 到服务器上的图像

Question

我想从客户端的 canvas 中获取图像数据，并在我的服务器上将其保存为 .png。

这是我客户端上的代码，它从 canvas 获取图像数据并将其发送到 saveImage.php：

function render()
    {

        var imageData = ctx.canvas.toDataURL("image/png");
        var postData = "imageData="+imageData;

        var ajax = new XMLHttpRequest();
        ajax.open("POST","saveImage.php",true);
        ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        ajax.onreadystatechange=function()
        {
            console.log(ajax.responseText);
        }

        ajax.send(postData);
    }

这就是 saveImage.php 的样子：

    <?php
    if(isset($_POST["imageData"]))
    {
        $imageEncoded = $_POST["imageData"];

        $imageDataExploded = explode(',', $imageEncoded);

        $imageDecoded = base64_decode($imageDataExploded[1]);

        $filename = time()."image".mt_rand();

        $file = fopen("./".$filename.".png","wb");
        fwrite($file, $imageDecoded);
        fclose($file);
        echo $filename;
        exit();
    }
?>

代码实际上工作正常，我的问题是创建的图像在某些方面有问题。当我尝试打开一个时，windows 说它无法显示图像，因为它不支持该格式？即使它是 .png?

我做错了什么？

Answer 1

您检查过实际通过 HTTP 发送的内容了吗？ $imageEncoded 可能以 data:image/png;base64,xxxxx

开头

去掉 base64 后面的逗号：

Answer 2

您应该先使用 encodeURIComponent() 对数据进行编码，然后再将其包含在 POST 数据中。

您还应该使用 jQuery 之类的框架来解决浏览器差异问题。我保证代码在所有浏览器中都不会相同。

在 PHP 上，尝试查看 file_put_contents() 以写入数据。输入更快！

php canvas 到服务器上的图像

php canvas to image on server

javascript

php

base64

canvas