javascript 如何使用我通过在 HTML 5 画布上绘图创建的 src 保存图像文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11645468/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to save an image file with the src i have created by drawing on HTML 5 canvas
提问by Sheikh Rahat Ali
I have used HTML 5 canvas for drawing something on it using javascript after i have done with drawing i have to save that canvas in hard disk. I can obtain the image src by using the following method:
在完成绘图后，我使用 HTML 5 画布在其上使用 javascript 绘制了一些东西，我必须将该画布保存在硬盘中。我可以使用以下方法获取图像 src：
var img = canvas.toDataURL();
after this the img variable contains something like the following value
在此之后，img 变量包含类似于以下值的内容
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAABkCAYAAABwx8J9AAAP/UlEQVR4Xu2dX4wV1R3HZwSCkbWIRpA+UMqfatwArqyKVSMUbENbGx8KafvQxDaRYKMvbdPyxPWlaNK+1FSDD/WptsEXUkWaytY1aK2y65YlS1SQrDR2Xa2KZTEQwNvvb51LLtvdvXPnnjt/znxucjJ3984553c+5zfznd+cM2fCgA8EIAABCEAAAoUnEB............
数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAfQAAABkCAYAAABwx8J9AAAP / UlEQVR4Xu2dX4wV1R3HZwSCkbWIRpA + UMqfatwArqyKVSMUbENbGx8KafvQxDaRYKMvbdPyxPWlaNK + 1FSDD / WptsEXUkWaytY1aK2y65YlS1SQrDR2Xa2KZTEQwNvvb51LLtvdvXPnnjt / znxucjJ3984553c + 5zfznd + cM2fCgA8EIAABCEAAAoUnEB ............
I can use this image src like
我可以像这样使用这个图像 src
<img id=myimage" src=img />
and the image gets displayed perfectly in a web browser.
并且图像在网络浏览器中完美显示。
What i want to do is save this image on the hard disk. Is there any way to save it with PHP or javascript.
我想要做的是将此图像保存在硬盘上。有什么办法可以用 PHP 或 javascript 保存它。
Any help will be appreciated.
任何帮助将不胜感激。
回答by Alvin Wong
For PHP >=5.2.0, you can use the data://stream wrapper:
对于 PHP >=5.2.0，您可以使用data://流包装器：
file_put_contents("file.png",file_get_contents("data://".$var_containing_the_data_uri));
where $var_containing_the_data_urishould be replaced by the variable containing the data URI, for example $_POST['image'].
where$var_containing_the_data_uri应该替换为包含数据 URI 的变量，例如$_POST['image'].
You could send the data using AJAX post. If you use GET method beware of the URL length limit.
您可以使用 AJAX 帖子发送数据。如果您使用 GET 方法，请注意 URL 长度限制。
Or if you want to let the clients download/save the image, just create an <img>element with the data URI srcand tell the client to Right-click and save it. You can also refer to the link that @Kode-Plus stated.
或者，如果您想让客户端下载/保存图像，只需<img>使用数据 URI创建一个元素src并告诉客户端右键单击并保存它。您还可以参考@Kode-Plus 所述的链接。
回答by zigzag.bond
I have done this recently and here is the code.
我最近做了这个，这是代码。
HTML Code:
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 code: Here "saveimg" is a button in my html.
JS 代码：这里的“saveimg”是我 html 中的一个按钮。
$("#saveimg").click(function(){
var dataurl=document.getElementById('mycanvas').toDataURL();
$("#data").val(dataurl);
$("#frm").trigger("submit");
});
PHP code:
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');
}
?>
Hope this helps.
希望这可以帮助。
回答by Erwin Moller
You can send the data to server via a form. For example:
您可以通过表单将数据发送到服务器。例如：
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>
And from PHP pick it up from $_POST["imgSrc"];
并从 PHP 从 $_POST["imgSrc"];
回答by Esailija
var data = canvas.toDataURL().split(",")[1],
xhr = new XMLHttpRequest;
xhr.open( "POST", "file.php", true );
xhr.send(data);
PHP:
PHP：
file_put_contents( "somefile.png", base64_decode( file_get_contents( "php://input" ) );
