1

在我完成绘图后，我使用 HTML 5 画布在其上绘制了一些东西，我必须将该画布保存在硬盘中。我可以使用以下方法获取图像src：

var img = canvas.toDataURL();

在此之后，img 变量包含类似于以下值的内容

数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAfQAAABkCAYAAABwx8J9AAAP / UlEQVR4Xu2dX4wV1R3HZwSCkbWIRpA + UMqfatwArqyKVSMUbENbGx8KafvQxDaRYKMvbdPyxPWlaNK + 1FSDD / WptsEXUkWaytY1aK2y65YlS1SQrDR2Xa2KZTEQwNvvb51LLtvdvXPnnjt / znxucjJ3984553c + 5zfznd + cM2fCgA8EIAABCEAAAoUnEB ............

我可以像这样使用这个图像 src

<img id=myimage" src=img />

并且图像在网络浏览器中完美显示。

我想要做的是将此图像保存在硬盘上。有什么方法可以用 PHP 或 javascript 保存它。

任何帮助将不胜感激。

4

4 回答 4

4

对于 PHP >=5.2.0，您可以使用data://流包装器：

file_put_contents("file.png",file_get_contents("data://".$var_containing_the_data_uri));

where$var_containing_the_data_uri应替换为包含数据 URI 的变量，例如$_POST['image'].

您可以使用 AJAX post 发送数据。如果您使用 GET 方法，请注意 URL 长度限制。

或者，如果您想让客户端下载/保存图像，只需<img>使用数据 URI 创建一个元素src并告诉客户端右键单击并保存它。您还可以参考@Kode-Plus 声明的链接。

于 2012-07-25T08:51:30.677 回答
2

我最近这样做了，这是代码。

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');
}
?>

希望这可以帮助。

于 2012-07-25T09:10:59.000 回答
1

您可以通过表单将数据发送到服务器。例如：

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"];

于 2012-07-25T08:25:35.370 回答
1 
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" ) );
于 2012-07-25T08:38:09.637 回答