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 回答