我正在尝试从画布生成图像,并通过用ajax发出的POST请求将其发送到服务器。
我正在使用html2canvas将div转换为canvas并使用toDataURL()将其转换为base64。
这是我的JS:
function genImg(){
html2canvas(document.querySelector("#ogImage")).then(canvas => {
var renderedImg = canvas.toDataURL()
$.ajax({
type: "POST",
url: "script.php",
data: {
base64Img: renderedImg
}
}).done(function(o){
console.log("saved")
console.log(renderedImg);
})
});
}
这是我的script.php文件:
<?php
$img = $_POST['data'];
$img = str_replace('data:image/png;base64, ', '', $img);
$img = str_replace(' ', '+', $img);
$fileData = base64_decode($img);
//saving
$fileName = 'photo.png';
file_put_contents($fileName, $fileData);
?>
这两个脚本都可以工作,并且使用正确的输出名称生成了png,但是生成的png为空。
我检查了收到的请求以及邮寄的内容,两者是不同的...
console.log(renderedImg)是一个非常长的base64代码。
该请求也是base64代码,但明显较短。 POST请求可以发送什么内容?还是我忘记了什么?
同样要检查我的问题所在,我复制/粘贴了javascript console.log(renderedImg)输出并用https://www.base64decode.org/对其进行解码
结果正是我需要的图像。
然后,我尝试使用POST请求数据,结果与生成的png文件相同,为空。
因此,我很确定我的问题是何时将数据从ajax发送到PHP。
最佳答案
我终于设法做到了,问题出在PHP文件中:
<?php
define('UPLOAD_DIR', 'images/');
// previously it was $img = $_POST['data']
$img = $_POST['imgBase64'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . 'test.png';
$success = file_put_contents($file, $data);
//send request to ocr
print $success ? $file : 'Unable to save the file.';
?>
从现在开始,我保存的图像正是所需的图像