将“画布”图像数据上传到服务器

Question

我需要即时将画布图像数据上传到服务器（数据库），即，我需要创建一个带有input = file的表单，并在没有任何用户交互的情况下发布图像数据。

Answer 1

您不需要文件输入，只需ctx.getImageData()使用Ajax 获取数据并将其发布到服务器即可。

请参阅MDN文档CanvasRenderingContext2D.getImageData()。

但是，即使使用，您也无法在IE中获取图像数据ExCanvas。

Answer 2

这是我解决此问题的方法。使用JavaScript将图像发布为base64数组，然后使用PHP解码并将其保存为图像。

客户端（JavaScript）：

$.post('/ajax/uploadthumbnail',

    {

        id : id,

        img : canvas.toDataURL("image/png")

    }, function(data) {

        console.log(data);

    });

服务器端（PHP）：

$img = $_POST['img'];

$img = str_replace('data:image/png;base64,', '', $img);

$img = str_replace(' ', '+', $img);

$data = base64_decode($img);

$file = $_SERVER['DOCUMENT_ROOT'] . '/images/some_name.png';

file_put_contents($file, $data);