使用html2canvas截取DIV并通过PHP上传后图片为0字节问题求助

我正在使用html2canvas截取DIV元素，并通过PHP将截图上传至服务器。控制台显示277ms html2canvas: Canvas renderer initialized (208x311 at 243.71250915527344,159.40000915527344) with scale 1.25，看起来功能正常，但PHP上传后的图片为0字节且无法打开。

现有代码 #

PHP代码：

<?php $data = $_REQUEST['base64data']; $image = explode('base64,',$data); file_put_contents('1.jpg',base64_decode($image[1])); ?>

jQuery代码：

<script>
function takeScreenshot(){ 
    var element = jQuery("#vpc-components")[0]; 
    html2canvas(element,{ 
        background:'#FFFFFF', 
        onrendered:function(canvas){ 
            var imgData = canvas.toDataURL('image/jpeg', 1.0); 
            $.ajax({ 
                url:'/wp-content/plugins/html2canvas/save.php', 
                type:'post', 
                dataType:'text', 
                data:{base64data:imgData} 
            }); 
        } 
    }); 
}
</script>

• 先确认base64数据的完整性
  在前端AJAX发送前，先console.log(imgData)查看输出的base64字符串是否完整（开头应该是data:image/jpeg;base64,）；同时在PHP里先打印$_REQUEST['base64data']，对比前后端数据是否一致。如果数据被截断，大概率是服务器的post_max_size配置太小，限制了POST数据的长度，需要在php.ini里调大这个值（比如设为16M）。

• 给PHP代码加上错误判断
  你的当前代码没有处理任何异常情况，比如如果接收到的base64数据格式不对，explode后没有$image[1]，解码后就会是空值。修改后的PHP代码可以加上校验：

  <?php
  // 优先用$_POST而非$_REQUEST，更安全
  $data = $_POST['base64data'] ?? '';
  $imageParts = explode('base64,', $data);
  
  // 检查base64格式是否正确
  if (count($imageParts) !== 2) {
      echo '错误：base64数据格式不正确';
      exit;
  }
  
  // 开启严格模式解码，失败时返回false
  $imageData = base64_decode($imageParts[1], true);
  if ($imageData === false) {
      echo '错误：base64解码失败';
      exit;
  }
  
  // 检查文件写入是否成功
  if (file_put_contents('1.jpg', $imageData) === false) {
      echo '错误：无法写入文件到服务器';
      exit;
  }
  
  echo '图片上传成功';
  ?>
  

  这样能直观看到哪里出了问题，而不是生成空文件。

• 检查服务器目录的写入权限
  保存1.jpg的目录需要给PHP进程写入权限，否则file_put_contents会执行失败，生成0字节的空文件。可以把目录权限设置为755，或者联系服务器管理员确认权限配置。

• 尝试更换图片格式
  有时候image/jpeg的编码可能出现兼容性问题，你可以试试把canvas.toDataURL('image/jpeg', 1.0)改成canvas.toDataURL('image/png')，同时PHP里保存为1.png，看看是否能正常生成图片。

• 检查AJAX的请求配置
  虽然dataType:'text'没问题，但如果数据量较大，建议确认服务器端是否开启了mod_security之类的安全模块，拦截了过长的base64数据；也可以在AJAX配置里加上processData: false尝试（针对大体积数据的兼容处理）。

内容的提问来源于stack exchange，提问作者Userman