Html2Canvas通过php将png图像保存到服务器，显示一半图像，并减小文件大小

在react js web应用程序中，我通过html2canvas将html div转换为.png图像，然后通过php保存到服务器文件路径

在服务器中保存文件后，图像大小减小，图像显示一半，屏幕的其余部分为黑色

我曾尝试使用html2canvas将HTMLdiv内容转换为png图像，它在客户端工作，但当我在linux服务器中保存到该文件时，文件大小会减小，并且不会显示完整图像

const input = document.getElementById('chart_application');
html2canvas(input, {
    logging: true, letterRendering: 1, allowTaint: false, useCORS: true, dpi: 200})
  .then((canvas) => {    
    const imgData = canvas.toDataURL('image/png');
    const imgageData = imgData.replace(/^data:image\/(png|jpg);base64,/, "");
    canvas.setAttribute('width',900);
    canvas.setAttribute('height',700);

    /*var link = document.createElement("a");
    link.download = 'yourImage.png';
    link.href = imgData;
    link.click();*/

    const data = new FormData();
    data.append("data", imgageData);
    var xhr = new XMLHttpRequest();
    xhr.open( 'post', 'http://3.89.110.194/pdf.php', true );
    xhr.send(data);
    window.location.reload();
  });


$image = $_POST['data'];
$filedir = 'merp2/public/pdf';
$name = 'chart';
$image = str_replace(' ', '+', $image);
$decoded = base64_decode(str_replace('data:image/png;base64,', '', 
$image));
$path = 'merp2/public/pdf/'.$name.'.png';
unlink($path);
file_put_contents($filedir . "/" . $name . ".png", $decoded, LOCK_EX);
chmod($filedir . "/" . $name . ".png", 0755);

---

$\u POST['chartid']

-您没有以该名称发送任何参数，您只发送

数据。当您在客户端使用生成的数据URI，将其分配为图像元素的src时，会发生什么情况-这会显示完整的图像吗，还是已经弄乱了？生成的数据URI在客户端工作正常，但是它只在服务器端出现了问题？如果首先发送正确的base64编码数据，则不需要这样做；它仍然不起作用。
$\u POST['chartid']
-您没有以该名称发送任何参数，您只发送
数据
。当您在客户端使用生成的数据URI时，会发生什么情况，将其分配为图像元素的src-这样会显示完整图像吗，还是已经搞乱了？生成的数据URI在客户端工作正常，但只在服务器端搞乱了。使用
$image=str_replace（“，+”，$image）的目的是什么？如果首先发送正确的base64编码数据，则不需要这样做；但它仍然不起作用。