Question

对于我的项目，我需要将画布上显示的内容保存到数据库中。我现在对toDataURL()函数非常熟悉，下面的代码（基本上只是一个测试）可以工作，显示图像两次。

var canvas = document.getElementById('canvas');
var image = new Image();
image.src = "03Jun15.jpg";
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
canvas.getContext("2d").drawImage(image, 0, 0);

var newcanvas = document.getElementById('newcanvas');
var img = new Image();
img.src = canvas.toDataURL("image/png");
var imageData = canvas.toDataURL("image/png");
newcanvas.width = img.naturalWidth;
newcanvas.height = img.naturalHeight;
newcanvas.getContext("2d").drawImage(img, 0, 0);

当我尝试通过Ajax将source保存到会话变量时，会出现问题。下面的代码直接在上面的代码之后，它在testcanvas画布上没有显示任何内容。我想要发生的是将$_SESSION['imageData']设置为数据URL，然后再次显示图像，但这次使用会话变量作为源。我得到的session变量虽然是一个很长的字符串，与原始的source变量非常相似，但显然与它不匹配（我已经做了一个快速的if语句来确认）。

$.ajax({
    url:"upload_image.php",
    method:"POST",
    data:{imageData:imageData}
});

var testcanvas = document.getElementById('testcanvas');
var newimage = new Image();
newimage.src = "<?php echo $_SESSION['imageData']; ?>";
var newsource = "<?php echo $_SESSION['imageData']; ?>";
testcanvas.width = newimage.naturalWidth;
testcanvas.height = newimage.naturalHeight;
testcanvas.getContext("2d").drawImage(newimage, 0, 0);

这是在upload_image.php上找到的：

session_start();

$_SESSION['imageData'] = $_POST['imageData'];

老实说，我不知道翻译中丢失了什么，有人可以帮忙吗？

Answer 1

为您找到这个： https://gist.github.com/peterschmidler/2410299

以下代码将画布保存为png，其中ajax为php。

使用Javascript：

var canvasData = canvasElement.toDataURL("image/png");
$.ajax({
    url:'save.php', 
    type:'POST', 
    data:{
        data:canvasData
    }
});

PHP：

$data = $_POST['data'];
$data = substr($data,strpos($data,",")+1);
$data = base64_decode($data);
$file = 'output.png';
file_put_contents($file, $data);
echo "Success!";

通过Ajax在PHP中保存Javascript中的数据URL

1 个答案: