我用HTML 5画布在上面用javascript绘制了一些东西。完成绘制后，我必须将画布保存在硬盘中。我可以使用以下方法获得图像src：
var img = canvas.toDataURL();
在此之后，img变量包含类似于以下值的内容
数据：image/png；base64，iVBORw0KGgoAAAANSUhEUgAAAfQAAABkCAYAAABwx8J9AAAP/UlEQVR4Xu2dX4wV1R3HZwSCkbWIRpA+UMqfatwArqyKVSMUbENbGx8KavQxDaRYKMvbdPyxPWlaNK+1FSDD/WptsXUkWaytY1aK2y65YlS1SQrDR2Xa2KZTEQwNvvvvb51LLtvdvvXPnnjt/znxucjJ3984553c+5zfznd+cM2fCgA8EIAABCEAAoUnEB。。。。。。。。。。。。
我可以像一样使用这个图像src
<img id=myimage" src=img />
并且图像在网络浏览器中被完美地显示。
我想做的是把这个图像保存在硬盘上。有什么方法可以用PHP或javascript保存它吗。
任何帮助都将不胜感激。
对于PHP>=5.2.0，您可以使用data://流包装器：
file_put_contents("file.png",file_get_contents("data://".$var_containing_the_data_uri));
其中$var_containing_the_data_uri应该被包含数据URI的变量（例如$_POST['image']）代替。
您可以使用AJAX post发送数据。如果您使用GET方法，请注意URL长度限制。
或者，如果你想让客户端下载/保存图像，只需创建一个数据URI为src的<img>元素，并告诉客户端右键单击并保存它。你也可以参考@Kode Plus声明的链接。
我最近已经完成了这项工作，下面是代码。
HTML代码：
<form id="frm" method="post" action="php/saveimg.php" style="display:none">
<input type="submit" value="submit"/>
<textarea name="data" id="data"></textarea>
</form>
JS代码：这里的"saveimg"是我的html中的一个按钮。
$("#saveimg").click(function(){
var dataurl=document.getElementById('mycanvas').toDataURL();
$("#data").val(dataurl);
$("#frm").trigger("submit");
});
PHP代码：
<?php
$data = $_POST['data'];
//removing the "data:image/png;base64," part
$uri = substr($data,strpos($data,",")+1);
file_put_contents('wow.png', base64_decode($uri));
if(file_exists('wow.png')){
header("Content-Type: application/force-download");
header('Content-Disposition: attachment; filename="wow.png"');
readfile('wow.png');
}
?>
希望这能有所帮助。
您可以通过表单将数据发送到服务器。例如：
var img = canvas.toDataURL();
// store in (hidden) element of a form
document.forms["storeImgForm"].elements["imgSrc"].value = img;
document.forms["storeImgForm"].submit();
<form action="http://www.example.com/storeme.php" Method="POST" name="storeImgForm">
<input type="hidden" name="imgSrc" value="">
</form>
从PHP中获取$_POST["imgSrc"]；
var data = canvas.toDataURL().split(",")[1],
xhr = new XMLHttpRequest;
xhr.open( "POST", "file.php", true );
xhr.send(data);
PHP:
file_put_contents( "somefile.png", base64_decode( file_get_contents( "php://input" ) );