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

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);