有一个图片库网站,用户可以通过 javascript 和 HTML5 画布操作图片。是否可以将处理后的图像发送回服务器以使用 PHP 存储?
问问题
2793 次
2 回答
4
在这里您可以找到有关该主题的完整文章。但这里是简短版本和源代码:
首先,您需要将画布二进制数据转换为 base 64 编码字符串以将其发送到服务器:
var image = canvas.toDataURL("image/png");
使用 ajax 调用发送:
var ajax = new XMLHttpRequest();
ajax.open("POST",'save.php', false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(image);
最后 PHP 脚本 save.php 看起来像这样:
<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
// Get the data
$imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
// Remove the headers (data:,) part.
// A real application should use them according to needs such as to check image type
$filteredData=substr($imageData, strpos($imageData, ",")+1);
// Need to decode before saving since the data we received is already base64 encoded
$unencodedData=base64_decode($filteredData);
//echo "unencodedData".$unencodedData;
// Save file. This example uses a hard coded filename for testing,
// but a real application can specify filename in POST variable
$fp = fopen( 'test.png', 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );
}
?>
PHP 脚本解析原始帖子数据,从 base 64 转换为二进制,并保存到文件中。有关 Base 64 的更多信息,请查看这篇Wikipedia 文章。
于 2012-08-25T15:26:38.687 回答
0
是的,canvas 支持将图像数据作为 Base64 编码数据 url 或 Blob 返回。请参阅http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-canvas-todataurl。然后,您可以获取数据 url 并使用 AJAX 将其发布到您的服务器,并在那里对其进行 Base64 解码。
于 2012-08-25T15:20:53.890 回答