gpt4 book ai didi

php - 使用 ajax 和 php 将 Canvas 上下文作为图像上传

转载 作者:太空狗 更新时间:2023-10-29 15:33:01 26 4
gpt4 key购买 nike

我有一个 Canvas ,我想使用 ajax 和 php 将 Canvas 上下文上传到服务器。我希望最终输出是存储在服务器上的图像。我已经使用表单完成了图像上传。但是现在我想获取 Canvas 上下文,将其转换为图像并上传到服务器!

那么,我该怎么做呢?感谢任何建议、算法或解决方案!

最佳答案

This blog post恰本地描述了使用 AJAX 查询将 Canvas 保存到服务器的方法,我想这应该适合你。

基本上,您将需要一个 var canvasData = testCanvas.toDataURL("image/png"); 来在 JavaScript 中检索 Canvas 的内容。这将是 Base64编码字符串,类似这样:data:image/png;base64,foooooooooooobaaaaaaaaaaar==

以下代码将确保 AJAX 查询将内容发送到 HTML:

var ajax = new XMLHttpRequest();
ajax.open("POST",'testSave.php',false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(canvasData);

在服务器上,在 PHP 脚本中,您将在 $GLOBALS 数组中有一个名为 HTTP_RAW_POST_DATA 的键,它将包含我们刚刚获取的数据。

// Remove the headers (data:,) part.
$filteredData=substr($GLOBALS['HTTP_RAW_POST_DATA'], strpos($GLOBALS['HTTP_RAW_POST_DATA'], ",")+1);

// Need to decode before saving since the data we received is already base64 encoded
$decodedData=base64_decode($filteredData);

$fp = fopen( 'test.png', 'wb' );
fwrite( $fp, $decodedData);
fclose( $fp );

当然,test.png 是您要保存的文件名。第一行需要删除编码图像的data:image/png;base64,部分,以便稍后可以通过base64_decode()解码。 .它的输出 ($decodedData) 将保存到文件中。

关于php - 使用 ajax 和 php 将 Canvas 上下文作为图像上传,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11843115/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com