AJAX发送Fabric.js画布数据PHP接收异常生成空白PNG如何解决

问题原因 #

使用application/x-www-form-urlencoded格式传输POST数据时，该编码规则会将内容中的+号解析为空格，其余特殊字符也会被自动转义，直接篡改了base64格式的图片数据，导致最终解码后的图片文件损坏，就会出现尺寸正常但完全透明无内容的情况。

修复方案 #

方案1：前端编码后传输（改动最小） #

发送数据前用encodeURIComponent()对base64内容进行编码，符合urlencoded格式的传输要求，后端代码无需修改。
只需修改前端请求的send语句：

xhr.send("canvasData=" + encodeURIComponent(canvasData));

方案2：改用FormData传输（扩展性更强） #

使用FormData对象封装参数，浏览器会自动处理编码规则，不需要手动设置Content-Type，也不会出现转义异常，适合后续需要同时传输其他参数、文件的场景。
前端请求代码修改为：

let xhr = new XMLHttpRequest();
xhr.open("POST", "php/saveImg.php", true);
xhr.onload = () => {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      let data = xhr.response;
      window.open(data);
    }
  }
};
let formData = new FormData();
formData.append('canvasData', canvasData);
xhr.send(formData);

方案3：后端修正转义字符（无需改前端） #

如果不方便调整前端代码，可以在PHP端把被转义成空格的+号替换回原始字符，再进行解码：

if(isset($_POST['canvasData'])){
  $imageData = $_POST['canvasData'];
  // 修正被转义的+号
  $imageData = str_replace(' ', '+', $imageData);
  echo $imageData;

  $filteredData = substr($imageData, strpos($imageData, ",") + 1);
  $a = file_put_contents( "images/image1.png", base64_decode($filteredData));
}

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